Plugin to make pure css tooltips in any editor.

syntax in editor:

normal tooltip


output: linktooltip


tooltip where tooltip-link is also a hyperlink

{tooltip href="http://www.joomla.org" target="_blank"}tooltip with hyperlink{end-link}to Joomla.org{end-tooltip}

output: tooltip with hyperlinkto Joomla.org


tooltip with different style

{tooltip class="tooltip_blue"}blue tooltip{end-link}blue text{end-tooltip}

output: blue tooltipblue text
you need to add the extra css code in the css file


dropdown so you can put hyperlinks in the tooltip, so it becomes a dropdown menu

{tooltip class="pure_css_dropdown"}dropdown menu{end-link}content with links etc.{end-tooltip}

output: dropdown menucontent with links etc.
The dropdown with links does not work in IE6


You can edit the css in:

  • Joomla 2.5 & 3: /plugins/content/purecsstooltip/purecsstooltip.css
  • Joomla 1.5: /plugins/content/purecsstooltip.css
  • Joomla 1.0: /mambots/content/purecsstooltip.css

license: GPL



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis auctor nulla. Curabitur ante leo, aliquam ac, aliquam non, hendrerit fermentum, urna. Curabitur ante leo, aliquam ac, aliquam non, hendrerit fermentum, urna. Quisque eu nibh a est adipiscing. Proin odio nisl, luctus non, commodo sit amet, ultricies ac, enim. stylesheet?you can edit the css in:
Joomla 2.5 & 3 /plugins/content/purecsstooltip/purecsstooltip.css
Joomla 1.5: /plugins/content/purecsstooltip.css
Joomla 1.0: /mambots/content/purecsstooltip.css
Etiam pulvinar. Aliquam et eros. Nulla tortor. Phasellus felis neque, auctor non, hendrerit at, aliquam a, leo. Quisque orci lorem, congue vitae, feugiat quis, ornare at, magna. Nulla feugiat viverra est. Phasellus nunc neque, aliquet ac, tincidunt sed. Fermentum quis, velit. ColofonThanks to Sander Aarts for his help with css. Hat velit eleifend justo aliquet pretium. Mauris tristique, augue ac laoreet laoreet, dui tellus fringilla nisi, at condimentum tellus quam in eros.  Duis quis felis.

Internet Explorer 6 standalone

Pure CSS tooltip works in IE6, but might show wrong in IE6-standalone-version.

Internet Explorer 6 can't deal with standard compliant CSS, so to make it work in IE6 a conditional statement is inserted in the header of your document.

Note that this conditional statement for ie versions 6 and lower (untested in ie5). If you are testing on a standalone version of ie6 it will probably identify itself as ie7 and still not work. But on a fully installed ie6 this does work.

Follow Us On Twitter