title: Specify a Dynamic Tooltip Using jQuery Tools
body: <p>I am trying to use jQuery Tools to setup some tooltips dynamically, but I am having great trouble.</p>
  
  <p>By default when you setup a tooltip in it's most basic form using jQuery Tools it will take the next element after the tooltip trigger as the actual tooltip.</p>
  
  <pre><code>$("#someElement").tooltip();
  </code></pre>
  
  <p>In a current application I am working on I have a link that I need to load a tooltip that is not the next element.</p>
  
  <p>Using jQuery Tools you can do this by using:</p>
  
  <pre><code>$("#someElement").tooltip({tip: '#tooltipElement'});
  </code></pre>
  
  <p>This is great, but I need to be able to set the tip dynamically, which I don't seem to be able to do.</p>
  
  <p>On the application I have links setup that look like this:</p>
  
  <pre><code>&lt;a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-1"&gt;Quick Preview&lt;/a&gt;
  &lt;a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-2"&gt;Quick Preview&lt;/a&gt;
  &lt;a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-3"&gt;Quick Preview&lt;/a&gt;...
  </code></pre>
  
  <p>The tooltips are then at the bottom of the page like this:</p>
  
  <pre><code>&lt;div id="tooltip-1"&gt;Some random content here!&lt;/div&gt;
  &lt;div id="tooltip-1"&gt;Some random content here!&lt;/div&gt;
  &lt;div id="tooltip-1"&gt;Some random content here!&lt;/div&gt;...
  </code></pre>
  
  <p>So what I then tried doing to make this work was:</p>
  
  <pre><code>$(".tooltip-preview").tooltip({tip: $(this).attr("data-tooltip-id")});
  </code></pre>
  
  <p>I have a feeling this doesn't work because $(this) isn't used as the $(".tooltip-preview") object. If this is the case how do I get that to work?</p>
  
  <p>What happens instead is the next element on each link is used as the tooltip.</p>