Commits

Christian Krebs  committed 11a333e

Updated tooltip widget.

  • Participants
  • Parent commits 5e04e40

Comments (0)

Files changed (2)

File resources/ui-scripts/tooltip/tooltip.js

-var Tooltip = function(tooltip_manager, keep_on_hover) 
-{
-  this._init(tooltip_manager, keep_on_hover);
-};
-
-Tooltip.prototype = new function()
-{
-  /* interface */
-
-  /**
-    * Called if a node in the current mouseover parent node chaine of the
-    * event target has a 'data-tooltip' value with the same name as this instance.
-    * To show the tooltip the 'show' method must be called, mainly to
-    * prevent that the tooltip is shown before it has content.
-    */
-  this.ontooltip = function(event, target){};
-  
-  /**
-    * Called if the tooltip gets hidden.
-    */
-  this.onhide = function(){};
-
-  /**
-    * To show the tooltip.
-    * By default the tooltip is positioned in relation to the element
-    * with the data-tooltip attribute. If the method is called with
-    * the optional 'box' argument that box is used instead to position
-    * the tooltip.
-    * @param box The box to position the tootip. Optional. Only left, top and 
-    * bottom are used. By default the box is given by the intersection of the 
-    * vertical line given by the mouse event left postion and the dimension
-    * and position of the target element.
-    */
-  this.show = function(box){};
-
-  /**
-    * To hide the tooltip.
-    */
-  this.hide = function(){};
-
-  /**
-    * A pointer to the HTMLElement to create the content of the tooltip.
-    */
-  this.container = null;
-
-  /**
-    * A flag to indicate if the tooltip should be hidden or not on hovering
-    * the tooltip itself.
-    */
-  this.keep_on_hover = false;
-
-  /* private */
-
-  this._init = function(tooltip_manager, keep_on_hover)
-  {
-    this.keep_on_hover = Boolean(keep_on_hover);
-    this.container = document.render(['div', 'class', 'tooltip']);
-    this._tooltip_handler = tooltip_manager;
-  };
-  
-  /* implementation */
-  
-  this.show = function(box)
-  {
-    this._tooltip_handler.show_tooltip(this, box);
-  };
-
-  this.hide = function()
-  {
-    this._tooltip_handler.hide_tooltip(this);
-  };
-};
-
 var TooltipManager = function() {};
 
 
 {
   /* static methods of TooltipManager */
 
-  this.register_tooltip = function(name, keep_on_hover) {};
-  this.unregister_tooltip = function(name, tooltip) {};
-  this.show_tooltip = function(tooltip, box) {};
-  this.hide_tooltip = function(tooltip) {};
+  this.register = function(name, keep_on_hover) {};
+  this.unregister = function(name, tooltip) {};
+
+  var Tooltip = function(keep_on_hover) 
+  {
+    this._init(keep_on_hover);
+  };
+
+  Tooltip.prototype = new function()
+  {
+    /* interface */
+
+    /**
+      * Called if a node in the current mouseover parent node chaine of the
+      * event target has a 'data-tooltip' value with the same name as this instance.
+      * To show the tooltip the 'show' method must be called, mainly to
+      * prevent that the tooltip is shown before it has content.
+      */
+    this.ontooltip = function(event, target){};
+    
+    /**
+      * Called if the tooltip gets hidden.
+      */
+    this.onhide = function(){};
+
+    /**
+      * To show the tooltip.
+      * By default the tooltip is positioned in relation to the element
+      * with the data-tooltip attribute. If the method is called with
+      * the optional 'box' argument that box is used instead to position
+      * the tooltip.
+      * @param content {String or Template} The content for the tooltip. Optional.
+      * If not set the "data-tooltip-text" value on the target element will be 
+      * used instead.
+      * @param box The box to position the tootip. Optional. Only left, top and 
+      * bottom are used. By default the box is given by the intersection of the 
+      * vertical line given by the mouse event left postion and the dimension
+      * and position of the target element.
+      */
+    this.show = function(content, box){};
+
+    /**
+      * To hide the tooltip.
+      */
+    this.hide = function(){};
+
+    /**
+      * A flag to indicate if the tooltip should be hidden or not on hovering
+      * the tooltip itself.
+      */
+    this.keep_on_hover = false;
+    
+    /* private */
+
+    this._init = function(keep_on_hover)
+    {
+      this.keep_on_hover = Boolean(keep_on_hover);
+    };
+    
+    /* implementation */
+    
+    this.show = function(content, box)
+    {
+      _show_tooltip(this, content, box);
+    };
+
+    this.hide = function()
+    {
+      _hide_tooltip(this);
+    };
+  };
+
+
 
   /* constants */
 
   const DATA_TOOLTIP = "data-tooltip";
+  const DATA_TOOLTIP_TEXT = "data-tooltip-text";
   const HIDE_DELAY = 120;
   const SHOW_DELAY = 110;
   const DISTANCE_X = 7;
         {
           _current_tooltip = _tooltips[name];
           _tooltip_ele.innerHTML = "";
-          _tooltip_ele.appendChild(_current_tooltip.container);
+          _tooltip_ele.appendChild(_current_tooltip._container);
         }
         _last_handler_ele = ele;
         _last_event = event;
   var _set_hide_timeout = function()
   {
     _clear_hide_timeout();
-    _hide_timeouts.push(setTimeout(_hide_tooltip, HIDE_DELAY));
+    _hide_timeouts.push(setTimeout(_handle_hide_tooltip, HIDE_DELAY));
   };
 
   var _clear_hide_timeout = function()
   {
     _clear_hide_timeout();
     _clear_show_timeout();
-    _show_timeouts.push(setTimeout(_show_tooltip, SHOW_DELAY));
+    _show_timeouts.push(setTimeout(_handle_show_tooltip, SHOW_DELAY));
   };
 
   var _clear_show_timeout = function()
       clearTimeout(_show_timeouts.pop());
   };
 
-  var _show_tooltip = function(event, ele, name)
+  var _handle_show_tooltip = function(event, ele, name)
   {
     if (_last_event && _last_handler_ele)
       _current_tooltip.ontooltip(_last_event, _last_handler_ele);
   };
 
-  var _hide_tooltip = function()
+  var _handle_hide_tooltip = function()
   {
     _clear_show_timeout();
     if (_current_tooltip)
     _last_handler_ele = null;
   };
 
-  var _setup = function()
-  {
-    document.addEventListener('mouseover', _mouseover, false);
-    var tmpl =['div', 'id', 'tooltip-container', 'style', 'top: -100px;'];
-    _tooltip_ele = (document.body || document.documentElement).render(tmpl);
-  };
-
-  /* implementation */
-
-  this.register_tooltip = function(name, keep_on_hover)
-  {
-    if (!_is_setup)
-    {
-      if (document.readyState == "complete")
-        _setup();
-      else
-        document.addEvenetListener("load", _setup, false);
-      _is_setup = true;  
-    }
-    _tooltips[name] = new Tooltip(this, keep_on_hover);
-    return _tooltips[name];
-  };
-
-  this.unregister_tooltip = function(name, tooltip)
-  {
-    if (_tooltips[name] && _tooltips[name] == tooltip)
-      _tooltips[name] = null;
-  };
-
-  this.show_tooltip = function(tooltip, box)
+  var _show_tooltip = function(tooltip, content, box)
   {
     if (tooltip == _current_tooltip)
     {
+      if (!content && _last_handler_ele)
+        content = _last_handler_ele.getAttribute(DATA_TOOLTIP_TEXT);
+
+      if (content)
+      {
+        if (typeof content == "string")
+          _current_tooltip._container.textContent = content;
+        else
+          _current_tooltip._container.render(content);
+      }
+
       if (!box && _last_handler_ele)
       {
         var _handler_ele_box = _last_handler_ele.getBoundingClientRect();
     }
   };
 
-  this.hide_tooltip = function(tooltip)
+  var _hide_tooltip = function(tooltip)
   {
     if (tooltip == _current_tooltip)
       _hide_tooltip();
   };
+
+  var _setup = function()
+  {
+    document.addEventListener('mouseover', _mouseover, false);
+    var tmpl =['div', 'id', 'tooltip-container', 'style', 'top: -100px;'];
+    _tooltip_ele = (document.body || document.documentElement).render(tmpl);
+  };
+
+  /* implementation */
+
+  this.register = function(name, keep_on_hover)
+  {
+    if (!_is_setup)
+    {
+      if (document.readyState == "complete")
+        _setup();
+      else
+        document.addEvenetListener("load", _setup, false);
+      _is_setup = true;  
+    }
+    _tooltips[name] = new Tooltip(keep_on_hover);
+    _tooltips[name]._container = document.render(['div', 'class', 'tooltip']);
+    return _tooltips[name];
+  };
+
+  this.unregister = function(name, tooltip)
+  {
+    if (_tooltips[name] && _tooltips[name] == tooltip)
+      _tooltips[name] = null;
+  };
   
 }).apply(TooltipManager);

File ui-elements/tooltip/index.html

 
 window.onload = function()
 {
-	var tooltip = TooltipManager.register_tooltip("test", true);
-
-	tooltip.ontooltip = function(event, target)
+	TooltipManager.register("test", true).ontooltip = function(event, target)
 	{
-		this.container.textContent = "tooltip " +
-		                             target.getAttribute("data-tooltip-data");
 		this.show();
 	}
 }
 <div id="viewport">
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>
 
 <ul>
-	<li><span data-tooltip="test" data-tooltip-data="test 1">item 1</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 2">item 2</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 3">item 3</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 4">item 4</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 5">item 5</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 6">item 6</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 7">item 7</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 8">item 8</span></li>
-	<li><span data-tooltip="test" data-tooltip-data="test 9">item 9</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 1">item 1</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 2">item 2</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 3">item 3</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 4">item 4</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 5">item 5</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 6">item 6</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 7">item 7</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 8">item 8</span></li>
+	<li><span data-tooltip="test" data-tooltip-text="test 9">item 9</span></li>
 </ul>