Question

I’m trying using tooltip() and opening multinstances as follow:

$("*").tooltip({
    selector: "*[rel=tooltipTOP]",
    placement: "top"
  });
  $('*').tooltip({
    selector: "*[rel=tooltipBOTTOM]",
    placement: "bottom"
  });

then in html i do for example

<a rel="tooltipTOP" data-original-title="top">tooltip TOP</a>
<a rel="tooltipBOTTOM" data-original-title="bottom">tooltip BOTTOM</a>

so tooltip TOP is ok but tooltipBOTTOM doesn’t shows the tooltip … why?

i tryed also to put specific class for tooltipBOTTOM but it doesn’t works, it instances only the tooltipTOP rel :/

JSFIDDLE http://jsfiddle.net/BH2GM/1/

Answer 1

First of all, why are you doing that based on rel? You really should use class.

<a class="tooltipTOP">tooltip TOP</a>
<a class="tooltipBOTTOM">tooltip BOTTOM</a>

and then

$(".tooltipTOP").tooltip({
    placement: "top"
});
$(".tooltipBOTTOM").tooltip({
    placement: "bottom"
});​

EDIT: But if you have to use rel, here’s the solution:

$("*[rel=tooltipTOP]").tooltip({
    placement: "top",
    trigger: "hover"
});
$('*[rel=tooltipBOTTOM]').tooltip({
    placement: "bottom",
    trigger: "hover"
});​