Tooltip constructor

  1. Element element,
  2. {bool animation,
  3. String placement(
    1. Element elem
  4. String selector,
  5. String template,
  6. String trigger,
  7. String title(
    1. Element elem
  8. int delay,
  9. int showDelay,
  10. int hideDelay,
  11. bool html,
  12. dynamic container,
  13. NodeValidatorBuilder htmlValidator,
  14. String defaultTemplate: _defaultTemplate,
  15. String defaultTrigger: 'hover focus'}

Construct a tooltip component and wire it to element.

    • If animation is true, the show/hide action will be animated. Default: true.
    • placement function determines where to put the tooltip. Accepted output
  • are 'top', 'bottom', 'left', 'right'. Default: a function which returns the
  • attribute 'data-placement' on the element, or 'top' if absent.
    • selector determines on which descendants the tooltip can be triggered.
  • If absent, the tooltip is triggered by the events on the element itself.
    • template determines the DOM structure of tooltip.
    • trigger determines the conditions which triggers the tooltip, separated
  • by whitespace. Accepted values are 'click', 'hover', 'focus', 'manual'.
  • Default value is 'hover focus'.
    • If the 'title' attribute is absent on the element, title function
  • determines the message shown in tooltip.
    • delay value determines the delay time when showing/hiding tooltip, in
  • milliseconds. You can specify showDelay and hideDelay to configurate
  • the delay time separately. Default: 0. Delay time only apply to 'hover' and
  • 'focus' trigger type.
    • If html is false, the component will html-escape the title when
  • rendering.
    • If container is given, the tooltip Element will be inserted as a child
  • of it. The value must be either a selector String, an Element, or an
  • ElementQuery object. If absent, the tooltip Element will be inserted
  • after the element.


Tooltip(Element element, {bool animation, String placement(Element elem),
String selector, String template, String trigger, String title(Element elem),
int delay, int showDelay, int hideDelay, bool html, container,
NodeValidatorBuilder htmlValidator,
String defaultTemplate: _defaultTemplate,
String defaultTrigger: 'hover focus'}) :
this.animation  = _bool(animation, element, 'animation', true),
this.html       = _bool(html,      element, 'html',      false),
this.showDelay  = _int(showDelay, element, 'show-delay', _int(delay, element, 'delay', 0)),
this.hideDelay  = _int(hideDelay, element, 'hide-delay', _int(delay, element, 'delay', 0)),
this.selector   = _data(selector,  element, 'selector'),
this.template   = _data(template,  element, 'template', defaultTemplate),
this.trigger    = _data(trigger,   element, 'trigger',  defaultTrigger),
this.container  = _data(container, element, 'container'),
this._title     = title ?? ((Element elem) => elem.attributes['data-title']),
this._placement = placement ?? ((Element elem) => elem.attributes['data-placement']),
this._htmlValidator = htmlValidator,
super(element, _name) {

  for (String t in this.trigger.split(' ')) {
    if (t == 'click') {
      $element.on("click.$_type", (QueryEvent event) => toggle(), selector: selector);

    } else if (t != 'manual') {
      final String eventIn = t == 'hover' ? 'mouseenter' : 'focus';
      final String eventOut = t == 'hover' ? 'mouseleave' : 'blur';
      $element.on("$eventIn.$_type", (QueryEvent event) => _enter(), selector: selector);
      $element.on("$eventOut.$_type", (QueryEvent event) => _leave(), selector: selector);


  this.options.selector ?
      (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
  if (selector == null)