Until now we've only used the Tooltip JavaScript component so our code is solid. However, in the next section, we will introduce a different component called Popovers. We need to do some clean up of our JavaScript code so that the two don't collide with each other and give us unwanted results.

Since this is the case, we should go back to _layout.ejs and edit the code by providing a specific ID for each Tooltip that you want to use in your project. Our script should now look like this:

<script> 
  $("#tooltip-link").tooltip(); 
  $("#tooltip-button").tooltip(); 
</script> 

<p><a id="tooltip-link" data-toggle="tooltip" >Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
<button type="button" id="tooltip-button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" data-original->This is a button tooltip!</button> 

As you can see, I've included the ID for each element in the preceding code. Now we are safe to start introducing new components without any worry of collisions occurring in the JavaScript. Let's move on to the component in question; Popovers.