Create Tooltips with Tipsy Module

/ By / 2 minutes of reading / 6 Comments

Just recently for one of my websites I did a bit of research to see how easy it’ll be to add keyword tooltips. What I want is when a user hovers over a keyword within a piece of content a nicely styled tooltip appears. There are a few modules on drupal.org that integrate with jQuery popup/tooltip plugins, however, I ended up choosing the Tipsy module. As the name suggests, the Tipsy module uses a jQuery plugin called Tipsy and the jQuery plugin creates Facebook-style tooltips.

Once setup, you’ll get tooltips like this:

Installing Tipsy is fairly straight forward, simply download and install the Tipsy module from drupal.org. The jQuery plugin ships with the module, so there is no need to manually download it, just install the module and you’re ready to go.

For the Drush users, run the following command:

$ drush dl tipsy

Before we configure Tipsy, let's quickly discuss how we want to implement the inline tooltips within content. We'll configure Tipsy so that the following markup will be displayed as a tooltip:

<a class="popup" title="Message will appear in the tooltip">Link text</a>

Tipsy will look for a HTML element with the class “popup” within the “field-name-body”. The tooltip message will be defined by the “title” attribute.

To configure Tipsy to go Configuration -> Tipsy (admin/config/user-interface/tipsy).

Tipsy allows you to define any number of rules. Each rule revolves around particular jQuery selectors. You can have a specific rule for inline tooltips and another for text within a block for example.

For our implementation for this article we’ll add “.field-name-body a.popup” to the selectors field and click on “Save configuration”.

We’ll leave the “Tooltip content” as is, this means that Tipsy will use any content within the “title” attribute as the tooltip content.
 
Last but not least, Tipsy saves all configuration within the variables table. If you use Features for code driven development, just export the "tipsy" variable using the Strongarm module.
 
If you know of any other tooltip style modules or have a question, please leave a comment.
 

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

6 thoughts on “Create Tooltips with Tipsy Module”

  1. Ramonius

    Hi! Great and easy solution.

    However I followed all the steps except for the drush thing but I cannot seem to make it work and nothing appears, not even the standard yellow-ish tooltip.

    – installed the module
    – activated it
    – configured it like you described
    – gave the link a class named .popup, which is within the content of a node
    – and finally used the selector .field-name-body a.popup

    Any ideas what could go wrong?

    1. ivan

      Hi,

      Are you getting any JavaScript errors? Also, .field-name-body a.popup will only work if the field machine name is “field_body”.

      1. Jeevan

        My tipsy works fine on body text but not in a text field with machine name “field_type”. Do I have to rename my selector to field-name-type?

  2. ivan

    Yes, you’ll have to change the selector to .field-name-type. Just double check the markup to make sure field-name-type is defined as a class name.

  3. Victor

    does this work on image also? like pass the “Alt” description within the content of tipsy? or should i just add the “Title” attribute within tag?

Comments are closed.

Scroll to Top