Moving from overlib to tiptip for doing popups in Sugar

sugarcrmdevelopers —  August 20, 2013 — Leave a comment

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…

&lt;a href="#" rel="tooltip" <strong>data-placement="bottom"</strong> data-original-title="This is my tooltip"&gt;Hover over me for a tooltip&lt;/a&gt;

As you can see, this will make it much easier to work with tooltips going forward.

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s