Tooltip For Nucleus
It's a nice way to show tittles on a webpage or blog. It's simple to use except when it has jquery conflict with other jquery. I embeded the jquery file with jquery noconflict in the FancyBox plugin. The css I include in my l2s.css. If you want to... ... use tooltip, you need the "jquery.tools.min.js" from the flowplayer.org website and the css file from the tooltip page... ... also. You need to put the javascripts on the html head page or your skin head.inc or head.php page. If you have the FancyBox plugin installed, all you need is the <%FancyBox%> placed on the head page.
CSS
.tooltip {
display:none;
background:transparent url(/tooltip/black.png);
font-size:12px;
height:auto;
width:180px;
color:#fff;
z-index:113;
padding:15px 10px;
text-align:center;
}
#demo img {
border:0;
cursor:pointer;
margin:0 8px;
}
#demo a {
border:0;
cursor:pointer;
text-align:center;
margin: auto;
padding: 15px auto 15px auto;
}
inside the css file that has the url of the tooltip image and this need to be correct to display.
How to use
All we need to do is to place
<div id="demo"> <a href="" title="balalalala">test</a> </div>
before any tags that has "title" description that you want to display and close the div like this. The tooltip will display what's in the tittle only. Example, put the mouseover the image below, the title = "div tooltip close with javascript document.ready". Anyhow, you can put these divs on the top of the page and close it on the bottom of the body, then EVERY title will be display in tooltip like this page.
![<script type="text/javascript">$j(document).ready(function() { $j("#demo a[title]").tooltip();});</script> //// use "a[title]" if link title is displayed and img[title]" if image title is displayed](/ltooz341/media/tooltip/ready.jpg){kind=link}
Make sure all these scripts and div are placed using html editor and not wysiwyg
Cheeers,
Louis