Now that we have the Tether file in our project directory we need to update our _layout.ejs template to include it when the page is compiled. From the root of our project directory, open up _layout.ejs and insert the following line of code near the bottom after jQuery. It's critical that the Tether file is loaded after jQuery, but before bootstrap.min.js:

<script src="js/tether.min.js"></script> 

Save the file and make sure you recompile your project so that this is imported into all of your HTML files. Once that's done, you will now be able to use Tooltips on any page that is included in our project.

Now that we've included the Tether library, we can learn how to actually use Tooltips in Bootstrap. Let's try them out on one of our project files. Open up index.ejs in your text editor and find a section of code that is just text, like this:

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p> 

Once you've found that section of code, let's wrap an <a> tag around the first three words with the following attributes on it:

<p><a href="#" data-toggle="tooltip" >Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

This is the basic markup needed to render a Tooltip. Let's breakdown what is happening here:

Before we can test this out in the browser, we need to add something else to our _layout.ejs template. Open that file in your text editor and insert the following code after the Tether library:

<script src="js/bootstrap.min.js"></script> 
<script> 
  $("a").tooltip(); 
</script> 

In Bootstrap 4, Tooltips need to be initialized before you can use them. Therefore, I'm using a little jQuery here to say that all a tags should be initialized to use the Tooltip method, which will activate all link tags for use with a Tooltip. This is a little trick you can use so you don't have to use an ID to indicate every Tooltip you want to initialize. Once you've completed this step, save all your files, recompile them, and then view your project in the browser; it should look like this when you rollover the link anchor text:

By default, in Bootstrap the position for Tooltips is above the anchor text. However, using the data-placement attribute will allow you to place the tip above, below, left, or right of the anchor text. Let's take a look at the code required to render the different versions:

<p><a href="#" data-toggle="tooltip"  data-placement="top">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p><a href="#" data-toggle="tooltip"  data-placement="bottom">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p><a href="#" data-toggle="tooltip"  data-placement="right">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
<p><a href="#" data-toggle="tooltip"  data-placement="left">Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

As you can see, I've added the data-placement attribute to each link tag. The following values will control the position of the Tooltip when you hover over it:

It's also quite easy to add a Tooltip to a button by using the same data attributes as links. Let's take a look at how to code a simple button with a Tooltip above it:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" data-original->This is a button tooltip!</button> 

Here you'll see a basic button component, but with the Tooltip data attributes:

To get Tooltips on buttons working, you need to initialize them the same way you did the links in the previous section. Open up _layout.ejs again in your text editor and include the following line of code. The entire section of JavaScript should now look like this:

<script> 
  $("a").tooltip(); 
  $("button").tooltip(); 
</script> 

Like we did with the link tags, we'll initialize all button tags to use the Tooltip component if called in the HTML template. Let's take a look at how our Tooltip on a button should look in the browser when it's done correctly: