Easiest way to have pop-up "tooltips" ANYWHERE.
Procedure to do it:
- Find the Drupal folder with your theme's .info file and
add stylesheets[all][] = mytooltip.css (under other similar lines) -
In Notepad (or any raw text editor) make the following file :
span.tooltip span {
display:none;
}
span.tooltip:hover span
{
display:inline;
position:absolute;
background:#FFFF99;
border:1px solid silver;
color:maroon;
width:200px;
margin-top:20px;
margin-left:-5px;
font-size:smaller;
line-height:1em;
}
and name it mytooltip.css
- Upload new css file and edited .info file to your theme's folder.
NOW YOU ARE READY TO USE IT. Here are the directions:
HOW TO HAVE A PopUp TOOLTIP come up below and to the right of words ON MOUSEOVER:
In Full HTML mode and viewing the Body in Plain Text mode:
Instead of having the [words to have a tooltip] BY THEMSELVES, replace those words
as indicated:
<strong><span style="color: #008080">
<span class="tooltip">[words HAVING
tooltip]<span>[tooltip ITSELF]</span></span>
</span></strong>
[When finished:
Remove the extra returns/spaces to have ALL THREE LINES ON A SINGLE LINES insomuch as possible (in place of the raw text).]
That's it. [ While you can put anything you want in the tooltip, links are not practical because you will find you have to mouseOUT to go over the "tooltip", making it disappear! You can have images, though, IF they are less than 200px wide (and less than about 350px in height). ]
Comments
Demo on my site
Demo on my site: Go to http://99online.us and look for the teal-colored words on the front page and mouseover them.
Words with tooltip need not be words
The 'words' that HAVE the tooltip need not be words. That could be a small picture and the tooltip that comes up could be a large version of the same picture, for example.
Also: If you need the tooltip to have a greater width, you can change the 200px to something else. (The height always adjusts to the height of the content in the tooltip.)