and mark the tick box "Expand Widget Templates"
Now find (CTRL+F) this code in the template.
</head>
And immediately Before it, paste this code:<!--TOOLTIP-STARTS-->
<style type='text/css'>
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}
</style>
<!--TOOLTIP-STOPS-http://www.royaltutor.net-->
You may modify the code in red as per your wish and then save the template.<style type='text/css'>
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}
</style>
<!--TOOLTIP-STOPS-http://www.royaltutor.net-->
And now onwards, add code similar to this to any link, if you want to display tooltip over it.
<a href="#">Your-Link-Title <span>Tooltip</span></a>
0 comments so far:
Post a Comment