Using any HTML inside the tooltip

Tooltip content can be any HTML, not just plain text. Move your mouse over the Download button and you'll see a tooltip that contains an image, table and a link element. You can also see the slide effect in action.

Download now

standalone demo

You have enough time to move your cursor away from the trigger element and place it on top of the link that is contained inside the tooltip. You can also customize this delay from the tooltip configuration.

Note that if the trigger has a title attribute then the manual tooltip won't be displayed because the title attribute overrides the manual tooltip.

HTML code

We have two things: a trigger element - which is the download button and the tooltip. By default, this tool assumes that the tooltip is placed right after the trigger element. As you can see we have a regular DIV element working as the tooltip container and it can contain anything as opposed to the simple title attribute in the previous demo.

<!-- trigger element. a regular workable link -->
<a id="download_now">Download now</a>
 
<!-- tooltip element -->
<div class="tooltip">
 
  <img src="/media/img/title/eye.png" alt="Flying screens"
       style="float:left; margin:0 15px 20px 0" />
 
  <table style="margin:0">
    <tr>
      <td class="label">File</td>
      <td>flowplayer-3.2.7.zip</td>
    </tr>
    <tr>
      <td class="label">Version</td>
      <td>2011-03-03</td>
    </tr>
    <tr>
      <td class="label">Size</td>
      <td>112 kB</td>
    </tr>
    <tr>
      <td class="label">OS</td>
      <td>all</td>
    </tr>
  </table>
 
  <a href="/release-notes">What's new in 3.2</a>
</div>

HTML

CSS coding

The tooltip is styled with these settings. In this example we are using a black-arrowed background image. The important thing to notice here is that you have all the power of CSS when "skinning" the tooltip. You can change the background settings, colors, borders and fonts, etc.

  /* trigger button */
  #download_now {
    background:transparent url(/media/img/downloadnow.png) no-repeat scroll 0 0;
    display:block;
    height:44px;
    margin: 0 auto;
    margin-bottom:30px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
  }
 
  /* mouseover state */
  #download_now:hover {
    background-position:0 -44px;
  }
 
  /* clicked state */
  #download_now:focus {
    background-position:0 -88px;
  }
 
  /* tooltip styling */
  .tooltip {
    display:none;
    background:url(/media/img/tooltip/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
  }
 
  /* a .label element inside tooltip */
  .tooltip .label {
    color:yellow;
    width:35px;
  }
 
  .tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
  }

CSS

JavaScript code

We select the trigger element with the #download_now selector. If we had chosen to use a class name instead of an ID, we could select multiple triggers from the page and all of them would use the element that is positioned after the trigger as the tooltip.

    $("#download_now").tooltip({ effect: 'slide'});

JavaScript

Note: the slide effect is not included in the standard jQuery Tools distribution. You must download a custom combination that includes this effect.

File	flowplayer-3.2.7.zip
Version	2011-03-03
Size	112 kB
OS	all