Using any HTML inside the tooltip
Tooltips demo 2 / 7 : 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 an link element. You can also see the slide effect in action.
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.
HTML code
We have two things: a trigger element - which is the download button as well as 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 previous demo.
<!-- trigger element. a regular workable link -->
<a id="download_now" title="System tooltip for search engines">Download now</a>
<!-- tooltip element -->
<div class="tooltip">
<img src="http://static.flowplayer.org/img/title/eye.png" alt="Flying screens"
style="float:left;margin:0 15px 20px 0" />
<table>
<tr>
<td class="label">File</td>
<td>flowplayer-3.1.5.zip</td>
</tr>
<tr>
<td class="label">Date</td>
<td>2009-10-24</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="/blog/36">New features in 3.1</a>
</div>CSS coding
The tooltip is styled with these settings. We use a white-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(/img/home/download.png) no-repeat scroll 0 0;
display:block;
height:44px;
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(http://static.flowplayer.org/tools/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;
}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.
$(document).ready(function() {
// enable tooltip for "download" element. use the "slide" effect
$("#download_now").tooltip({ effect: 'slide'});
});Note: the slide effect is not included in the standard jQuery Tools distribution. You must download a custom combination that includes this effect.
