Bootstrap 4 Tooltips
Add a stylized tooltip with the Bootstrap tooltip functionality.
Bootstrap provides tooltip functionality that allows a stylized tooltip to appear when the user hovers over an item. The text of the tooltip comes from the title attribute.
Tooltips are generally more suitable for <a> and <button> elements.
Tooltips rely on the 3rd party library Tether for positioning. Therefore, you need to ensure that you're calling the tether.min.js file on your web page (we already included this file when we were getting started with this tutorial).
Initialization
Bootstrap tooltips are not enabled by default. They require initialization before you can use them.
One way to do this is to place the following code somewhere after the call to JQuery:
You can see an example of this by opening the above example in the Scratchpad Editor and scrolling down the code editor (left frame) until you see the above code.
Tooltip on a Link
Here's a basic example of applying a tooltip to a link.
Tooltips on Buttons
Here's an example of applying a tooltip to a button.
Tooltip Position
You can specify for the tooltip to appear at the top, bottom, left or right.
Here's a basic example of four tooltips, each with a different placement.