Basics of using the tooltip

Here we have four img tags and their title attribute working as the tooltip. This kind of simple syntax will also show the browser's standard tooltips even though JavaScript is not enabled. This whole setup can be enabled with one JavaScript one-liner.

standalone demo

HTML coding

You need two things: the elements that show the tooltips when the cursor is placed on top of them, these elements are called triggers. You also need one or more tooltip elements. In this setup we have a single tooltip element that works for all of the triggers:

<!-- elements with tooltips -->
<div id="demo">
  <img src="image1.jpg" title="The tooltip text #1"/>
  <img src="image2.jpg" title="The tooltip text #2"/>
  <img src="image3.jpg" title="The tooltip text #3"/>
  <img src="image4.jpg" title="The tooltip text #4"/>
</div>

Trigger elements can be anything such as a, div, samp and table elements.

CSS coding

By default the Tooltip generates the tooltip element automatically and assigns the CSS class name tooltip to it. It should be initially hidden by the CSS by setting display: none. We have no specific styling for the trigger elements.

  /* tooltip styling. by default the element to be styled is .tooltip  */
  .tooltip {
    display:none;
    background:transparent url(/media/img/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#eee;
  }
  

JavaScript coding

Tooltip activation starts by selecting the trigger elements with jQuery. Here we select all img tags that have a title attribute and are nested inside an element with id demo. We supply one argument for the tooltip initialization call which is a jQuery selector to the tooltip element.

    $("#demo img[title]").tooltip();
  

The default behaviour is that the tooltip is positioned on the top/center of the trigger and it slides upwards. Of course, the positioning and the sliding effect can be altered in the configuration as will be seen in the upcoming demos.

Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manual.