Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

better css for the drupal hovertip module

Parent Feed: 

don't get me wrong, i'm a happy customer of the drupal hovertip module. everything worked out of the box, and i've enjoyed using it to cram even more pictures into my website. however, the included default css leaves a little to be desired for the following reasons :

  1. it's too specific. it assigns a very particular look and feel to your tooltips, complete with background colors, fixed widths and font sizes. sure, in theory, you can override all that in your theme css. but if css specificity is not your thing, you're going to be tearing your hair out trying to figure how to do it.
  2. the ui element chosen to indicate "hover here" is non-standard. the "hover here" directive is admittedly fairly new, but the emerging standard seems to be the dashed-underline (certainly not the italic font used in the drupal hovertip module).
  3. the clicktip css does not work on ie6. the link to close the clicktip has mysteriously gone missing.

you can download a more generic, flexible version of the necessary hovertip module css that solves all these issues here. here are some examples of how to use it.

hovertips

a hovertip causes a floating div to appear, just below and to the right of your cursor. the floating div can contain anything you like.

the simplest example of a hovertip might contain some plain text. in this example, and all that follow, the supporting html is shown in a code block. notice that you need to assign the floating div a background color. the default background color is transparent.

These are some explanatory words

the simplest example of a hovertip might contain some <span hovertip="text">plain text</span>. 

<div class="hovertip" id="text" style="background-color:#DDD;">
<p>These are some explanatory words</p>
</div>

a more entertaining hovertip might reveal a picture.

a more entertaining hovertip might reveal a  <span hovertip="picture">picture</span>.

<div class="hovertip" id="picture" style="background-color:#FFF;" >
<img src="http://gallery.johnandcailin.com/d/9144-2/ava+ladybug+109.JPG">
</div>

and finally, a hovertip may also contain a link

<p>and finally, a hovertip may also contain a <span hovertip="link">link</span></p>

<div class="hovertip" id="link" style="background-color:#DDD">
Visit our <a href="http://www.johnandcailin.com/tech">tech blog</a>
</div>

clicktips

a clicktip causes a previously invisible div to suddenly reveal itself. the clicktip div comes with a close link that makes the clicktip disappear again.

here is a clicktip that contains some text

These are some explanatory words

<p>here is a clicktip that contains some <span clicktip="text">text</span></p>

<div class="clicktip" id="text" style="background-color:#DDD;padding:5px;">
<p>These are some explanatory words</p>
</div>

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web