Alternative tooltip for use on Joomla website

For use on a Joomla 3 website i want an implementation of this library as tooltip system.

[login to view URL]

The tooltip is primarily used to display a piece of text. But the text comes from the database and may contain html with class names for presentation.

On devices with a mouse the tooltip should appear on hover.

On devices with touch screen it should appear with a click/touch.

In both cases it should require a click/touch to remove the tooltip again.

The size of the tooltip should adjust to the size of the screen so text does not flow outside the visible area left or right. Down is fine.

These things should normally be covered by the suggested library.

Reading the documentation it should be a simple job to implement it.

As an alternative to using the screen edge as boundary for the tooltip size i would prefer the tooltip boundary stays inside the website boundary. Perhaps by adding a <div> that functions as a boundary. I do not know if this is possible with this library. To be tested on all sorts of devices big and small screens. It needs to look good and be functional on all. The end-user experience is key for the final result.

I want the implementation to be as independent as possible of Joomla itself. So that with future upgrades of Joomla i do not need to worry if my own tooltip system will keep working. So it seems most appropriate to create a system plugin with a custom tooltip name/marker. Something like "class=nodereftip" so it can be differentiated from the standard Joomla tooltip.

CSS HTML5 JavaScript Joomla PHP

Project ID: #18126065

About the project