Question

I’m trying to figure out how you can open the tooltip by clicking on the icon as well as closing it. I’ve been looking at some of the discussion here, but none of them doesn’t seem to work at my end. Here is what I have so far:

HTML

<span class="info">
  <img alt="aImage" src="images/aImage.png" />
  <span style="display: none;" class="stuff">something something</span>
</span>

Javascript

$(document).ready(function(){
  $(".info").tooltip({tooltipcontentclass:"stuff"})
});

For this, of course, this will only show the tooltip if the mouse is hovering over it and closes it if you hover it away. I know it’s not much, but this is the best I can do here. Please let me know if there is a way for opening and closing it by clicking.

Answer 1

I think you do not even need a plugin for this.
A little CSS and jQuery is enough:

$(function(){

  $(".info").click(function(){
    var left = $("img",this).offset().left + ($("img",this).width()/2) - ($(".tip", this).width()/2);
    $(".tip", this).toggle().css({"left":left});

  });

});

Sample: http://jsfiddle.net/NPXaf/