Avoiding collisions with our components

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> 

Note

Note that I removed the a and button selectors and replaced them with IDs named #tooltip-link and #tooltip-button. Now we also need to update our link and button code on the index template to include these IDs.

<p><a id="tooltip-link" data-toggle="tooltip" >Pellentesque habitant morbi</a> tristique senectus et netus et malesuada fames...