Hello in this bootstrap four video, we're going to show you tooltips. Where are tooltips are basically they provide some information to the user, when they hover over a certain element. You may have seen this website, actually, you probably definitely have seen this in a website, hover over something gives them information about it or information about the website. Basically, it's a tooltip. So to implement this really easy, we're going to use a button we can easily modify into a href or something else. But before you actually start creating your tooltip buttons.
First of all, we need to do some setup. First thing that we need to do is include a third party I record Trevor, there will be a link in the description to their GitHub page where you can download the file from I've already got it on the desktop, so I'm just going to be using that and as this index file is located on the desktop can easily included by doing Script. One thing to note is bootstrap needs this file for you to use taught it. So make sure you include it before you include the bootstrap j s, just something to bear in mind for sauce on have to spell it correctly, j s. And the final piece to setting up is basically enabling tooltips because by default, they're not enabled. And the easy way to do it is just run some JavaScript code. Secondly, a mixture of JavaScript and jQuery.
It likely is jQuery, which is JavaScript. Sorry, psych. It's not like it's a hybrid joke. jQuery is written in JavaScript and by definition, it's JavaScript. Okay, and then in here, Darla function we're gonna do curly braces semi colon. In here, what you want to do is to Allah.
And in here, you're going to want to put square bracket data. Toggle equals to tick. And I put a quotation mark, I just need one of the things dead. We already have a quotation mark at the start and the end. And even the square bracket.to tip, open and close bracket is calling a method. That's it to set it up.
Now we can stock code in our tooltip or tooltips, I should say. So in here, it's going to do button and we're going to put a type of return. We've got video covering buttons or check the maximum are really going to be explaining what we're doing. Here pre class to do between dish Ron Murray data toggle data dash placement equals and now this is where you would like your tooltip to appear and for the first one I'm going to put top Oh see Daisy forgot one thing title he calls top to tip and now in here I was gonna put hava for top, we can simply copy and paste this for times, free times actually, we've already got it once. And for this one who is going to change this to water, change this to left, change this to right and change anything, everything else as well.
So it just all matches up. I think this is really easy to use to Tex. Director left, right, save. Refresh, we are forgotten. No click ordinary buttons to me. And that's because they are for a hover of the first one.
Yeah, the tooltip do not show that that's shouldn't be the tooltip. So let's go back and see what we missed. Oh, data dash toggle. This needs to be equal to to tip because this is what is being enabled here. So save some time. Copy and paste this DD on positive is going to work now, if I refresh However, they go top tooltip, bottom to the left tooltip and right tooltip.
So it's that easy to create tooltips they're really useful for providing some basic information to the user. If you have any questions, feel free to post them on our education platform sonar learning code at UK for slash question, PHP, there'll be a link in the description. There'll be another link in the description to the source code from this video. Please rate, comment and subscribe as it really does help us grow and provide more content. But also it helps us understand what you like and what you don't like about our content. So in the future, we can fix that and just keep great what you like.
So as usual, thank you for watching. And I hope you have a great day.