In this lesson we'll be creating a tooltip a tooltip is a small pop a box that appears over an element
when a mouse pointer hovers over it.
In this example we have the word tooltip defined as a link element when we hover our mouse over the
word a tooltip pop up box appears the tooltip has some text content inside of it to create a tooltip
select or create any HMO element that you want to apply the tooltip to in our example.
We have a link element using the 8a
next.
We've applied the attribute data toggle and set it to tooltip.
We've also created a data placement attribute and set it to top
the data placement attribute defines the position of the tooltip.
We can set it to top bottom left or right next create a title attribute and insert the words that you
would like displayed in your tooltip.
In our case we have the words insert tip and so you can see that text inside the tooltip.
If we change it
you can see it updates
will also go ahead and change the data placement and you can see what that looks like so let's bottom
left
can right
after that's complete.
It's necessary to initialize the tooltip function with J query to do so.
Add the following javascript your HDMI page before the closing body tag this code block will enable
all tool tips in the existing document.