Want to add Easy pop-up 'tooltips' on Any Page?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
lorlarz2's picture

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

lorlarz2's picture

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

lorlarz2's picture

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.)

Twin Cities

Group events

Add to calendar

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week