title: jQuery UI multiple selectable tooltips are collapsing
body: <p>I'm new to jQuery UI.</p>
  
  <p>I'm trying to create a <strong>selectable</strong> jQuery UI tooltip. The tooltip is associated with the links on a page.</p>
  
  <p>When the link is surrounded by just text, it works fine. But when there are few links next to each other, the functionality overlaps and tooltips don't show smoothly anymore.</p>
  
  <p>you can find the code on <a href="http://jsfiddle.net/zumot/Hc3FK/2/" rel="nofollow">http://jsfiddle.net/zumot/Hc3FK/2/</a></p>
  
  <p>Below the JavaScript code</p>
  
  <pre><code>$("[title][data-scan]").bind("mouseleave", function (event) {
  event.stopImmediatePropagation();
  var fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
  $(".ui-tooltip").click(function () {
      alert("I am clickable");
      return false;
  });
  $(".ui-tooltip").hover(
  function () {
      clearTimeout(fixed);
  },
  function () {
      $("[title][data-scan]").tooltip("close");
  });}).tooltip({
  items: "img, [data-scan], [title]",
  content: function () {
      var element = $(this);
      if (element.is("[data-scan]")) {
          var text = element.attr("href");
          return "&lt;a href='http://www.google.com'&gt;You are trying to open a tooltip  &lt;span&gt;" + text + "&lt;/span&gt;&lt;/a&gt;";
      }
      if (element.is("[title]")) {
          return element.attr("title");
      }
      if (element.is("img")) {
          return element.attr("alt");
      }
  },
  position: {
      my: "right center",
      at: "left center",
      delay: 200,
      using: function (position, feedback) {
          $(this).css(position);
          $("&lt;div&gt;")
          .addClass(feedback.vertical)
              .addClass(feedback.horizontal)
              .appendTo(this);
      }
  }});
  </code></pre>