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