I’ve had some feedback on noticing that we are moving away from the stalwart overlib library, and asked what library they could use to replace it. Starting in Sugar 6.6 we began leveraging the Bootstrap tooltips as a part of our official styleguide, which make doing tooltips much easier.
Now you can embed the tooltip right in the HTML tag like shown below…
<a href="#" rel="tooltip" data-original-title="This is my tooltip">Hover over me for a tooltip</a>
This looks like this in the browser
This would decorate the element with the id of ‘example’ with this tooltip, meaning if you hovered over that element the tooltip will appear. Pretty simple :-).
There’s also a bunch of configuration you can do. For example, by default the tooltip appears above the content. You can change it to below, or to the right or left of it by adding in another attribute…
<a href="#" rel="tooltip" <strong>data-placement="bottom"</strong> data-original-title="This is my tooltip">Hover over me for a tooltip</a>
As you can see, this will make it much easier to work with tooltips going forward.