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