Hello, in this bootstrap video, I am going to show you how to implement tool tips in Bootstrap five.
So what is a tool tip if I go to the bootstrap website and a tool tip if you see the button.
So if I click on click sorry, hover over, I should say, on this one little tooltip over it and it
can provide some extra information.
You might just explain what this button does, that on the right, bottom left and defined with HTML.
So feel free to check that one out as well.
You can check out the disabled state as well and a bunch of other stuff and all of the options that
are available.
I'm going to show you how to implement a basic one and then from there you can utilize this.
So if they make sure you include Papadakis, that's something I've already had them already included
when I set up bootstrapping the setup video.
If you are new to this and have gone straight to this video for Tool Tips, make sure you got that there,
OK?
So what we're going to do is implement our just a similar button to what is on there.
So type equal button and then I'll show you how to activate it via JavaScript.
Can be a bit convoluted if you don't know what you're doing.
The first time in between the secondary, feel free to check out my video on buttons for more information
on buttons and epic button.
And the data does toggle equal to temp and data, that placement equals bottom, though, if you want
in the top, you've got top if you want on the left, upper left if you want to.
On the right, you will put right on.
The title is basically what appears in that tooltip on the tooltip on bottom.
Obviously this is a sign that it's on the bottom, but they can say whatever you want.
And honestly, the epic tip and currently if I go here.
It doesn't appear we need to actually activate it in JavaScript, and that is up to us as the developers
to that way, if for some reason maybe we've detected that they're on a mobile device, for example,
this doesn't look very good on mobile devices, though.
Very powerful now in twenty twenty.
Still not powerful, obviously, as a desktop machine.
And you might want to save some processing power.
OK, so what options he calls
code on?
The only option on the poor is animation theory to put more options by then putting the other options
like I showed you down.
Here, a bunch of that, a lot of options are available for two tips now, what we need to do that can
get the elements of all elements
document.
Don't get element by I do, and this is what we put here for the Odisho epic, Puttan.
Now with a wall to tape a new
bootstrap dot tooltip.
Element options, and there we are.
OK, so that should be it and thus activate itself.
Go back, reload, hover.
That's not working.
Let me inspect, make sure we got no errors.
We do have an error line.
Thirty five.
To be an equal sign, the.
We load the tooltip on bottom, it's as simple as that for implementing tool tips, great for providing
extra information without having all of the content on the website, which can look a bit cluttered.
If you have any questions, feel free to pop me a message.
And as usual, I look forward to seeing you in the next video.