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”.
6 thoughts on “Create Tooltips with Tipsy Module”
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?
.field-name-body a.popupwill only work if the field machine name is “field_body”.
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?
Yes, you’ll have to change the selector to
.field-name-type. Just double check the markup to make sure
field-name-typeis defined as a class name.
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?
Sorry I have not tried the module on images.
Comments are closed.