Add Tooltips with Bootstrap 3 Components

Learn how to add tooltips on your page

Hi! With this movie we will show you how to add tooltips on your page, using DMXzone Bootstrap 3 Components.

Step by Step

Before you begin

We created a bootstrap 3 page in Dreamweaver. Keep in mind that in order to use DMXzone Bootstrap 3 Components you need to have DMXzone Bootstrap 3 installed in your Dreamweaver.

Add a tooltip

We'd like to add nice tooltips to the images on the page. We are working in live view, but if you prefer, you can work in Design view also. Select the element (1), that you want to add a tooltip to. In our case this is the first image in the gallery. Then, check the show tooltip checkbox (2) in the Bootstrap 3 Components panel.

Add text

Now, add the text for the tooltip (1). You can use html tags in the tooltip text field. If the tootltip text contains any HTML tags, you must check the HTML checkbox. Select whether the tooltip should fade in and out (2) or not.

Customize the appearance

Select a position for the tooltip. Four options are available: top, right, bottom, and left aligned. We choose top (1). Now, choose how to trigger the tooltip. We select on hover and focus (2). You can add a delay when showing and hiding the tooltip. This must be a numeric value in milliseconds.

Save and preview

You can see the nice animated tooltip, that appears when we hover the image. That's how easy it is to add tooltips on your page, using DMXzone Bootstrap 3 Components.