In this demo we are using custom content with Easy Tooltip plugin. Roll over this link to view custom content sent to the plugin.
Note: I am using the plugin twice on this page. Besides custom content I also have custom id so I can style this tooltip separately. All other a tags will keep default settings.
$(document).ready(function(){
$("a").easyTooltip();
$("a#link").easyTooltip({
tooltipId: "easyTooltip2",
content: '<h4p>Some title</h4></p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Mauris placerat.</p>'
});
});
#easyTooltip{
padding:5px 10px;
border:1px solid #195fa4;
background:#195fa4 url(bg.gif) repeat-x;
color:#fff;
}
#easyTooltip2{
padding:5px 10px;
border:1px solid #5e5e5e;
background:#5e5e5e url(bg2.gif) repeat-x;
color:#fff;
width:250px;
}
#easyTooltip2 h4, #easyTooltip2 p{
margin:.25em 0;
}
Easy Tooltip jQuery Plugin is brought to you by Css Globe and supported by Css Templates by Templatica