It is always nice to be able to provide users with hints about how to complete a form field or what information to provide. Using Bootstrap's tooltip feature we can easily accomplish this.

Here we can see an example of the button with tooltip that you will be creating in this lesson.

STEP 1

The first thing we need to do is ensure that we have correctly linked to the required Bootstrap files.

We will start with a basic template and place references to the required Bootstrap css, jQuery, and Bootstrap js files in the head section as follows:

STEP 2

Next, we shall create a simple button:

At this stage all we have is a simple green button with the word UPLOAD on the button.  

STEP 3

Now, suppose we wish to add a tooltip to the button so that when the user hovers over the button they see some more information about what the button may be used for.

We add the required data-toggle attribute to the button as follows:

The data-placement attribute is set to 'right' in the example above.  The four options are:

• left

• right

• top

• bottom

STEP 4

At stage, the tooltip will not work.  We still need to initiate the javascript call to the tooltip function.