Bootstrap 5 Crash Course Tutorial #15 - Tooltips

Key Takeaways

all right then gang so the next component we're going to look at is the tooltip component and this is a little information bubble that pops up with more information when you hover over something you see them quite a lot in forms to explain form fields so you can see them in action if you hover over these buttons and notice how it appears in different places so to the top the side the bottom etc so you can easily configure this with a date attribute now they're really easy to set up but they do require one extra step a small amount of javascript is required to initialize any tool tips you add to your page so let's take a look at how to do it all right so we're going to place a couple of tooltips on this page three in total the first one is gonna be on this book just so i can show you how they work and then after that we'll come down to the form and we're gonna place a couple of icons at the end of these two inputs right here and when we hover over those icons we're gonna show a tooltip there as well so let's start at the top on the image so it's in the intro section at the bottom of that we have an image right here we're going to surround that with a tooltip now the way we do this is by making a span first of all and i'm going to take the image and put it inside that span sack now i'm going to give this a class and that class is going to be tt now this is not a bootstrap class this is just a class i've made up tt for tooltip so that when we start to use javascript to implement the tooltips to trigger them if you like it's going to look for anything with a class of tt you can call it something different if you wish anyway but by the way don't call it tool tip because bootstrap is going to use that under the hood when it starts to work its magic in the javascript so anything else all right then so after that i'm also going to give this a data attribute and that data attribute is to say where we want this tool tip to show do we want it at the top when you hover over to the side or at the bottom etc so let's say data hyphen bootstrap hyphen placement like so and set that equal to bottom in this case and then finally we just need a title attribute and in here is the text that we're going to show when a user hovers over this image so the information in the tooltip so i'm just going to paste in a sentence right here oops not that one we don't want that that's for the form okay so we'll just say net ninja book cover all right so let me try this out at the minute if i save it and hover over the book nothing is gonna work and that is because remember i said that in order for this to work we have to add a little bit of javascript so there are just a handful of different components in bootstrap that when you use them you have to trigger them or start them with a bit of javascript it's not hard to do just scroll down to the end of the page inside the body at the end of the script right here after that one we're going to paste in another script dead simple all i do is create a constant called tooltips and i set it equal to document.queryselect all and i grab anything on the page with a class of tt remember that was the class i gave the spam tag so we have then a collection of elements because there might be three or four tooltips on the page right they're all now going to be stored inside tooltips then we cycle through that collection using a for each and for each tool tip which i refer to as t we fire a function and all we do is create a new bootstrap tooltip and we pass in the element and that creates it for us and that takes care of everything so that's all we have to do and now we can add as many tooltips on the page as we like because this is going to find all of them as long as they have that class of tt they're going to work so if i save this now and come to the top and hover over now we can see that tooltip and you can see that the arrow is at the top and the message is at the bottom that's because we said the placement was at the bottom all right cool so now let's add some tool tips in the form so i've created two comments where we're going to add these this is the first input and it's going to be inside the input group so all we're going to do is create another input group text like this so let me copy that and paste it down here and this icon is going to be something different we want it to be some kind of question mark so i'm going to use question hyphen circle like so so that's a question mark in a circle and also i'm going to give this a class of text muted okay so that's the icon and if we take a look at this we're going to see that if i scroll down here we can see that now i want to implement the tooltip so that when we hover over this we see that tooltip so we need to surround this icon with the tooltip so i'm going to say span right here and again i need to give this a class of tt so that our javascript picks it up i'll take the closing span and place it after the icon like so and then inside here we need to say where the placement is so data hyphen bootstrap hyphen placement and again that's going to be equal to the bottom you can use a different value if you want and then the title which i'm going to set equal to the thing i pasted before oops it's gone now from a clipboard let me just grab it again paste it in so enter an email address we can reply to okay so before we test this out i'm just going to copy all of this right here and i'm going to place it down here where we have this tooltip as well so again it's inside the input group for the second input and we're going to use the same icon this time we're just saying here pretty self explanatory can i spell this explanatory really dot dot all right so if we now hover over this one then we can see enter an email we can reply to and for the name pretty self-explanatory really awesome so there we go my friends that's how we create tooltips dead simple just create the span with any class except for tooltip and then create the placement the title which is the text inside the tooltip and then surround whatever element you want the tooltip to be for and then finally in the script just create a script like this to trigger them