1
00:00:01,190 --> 00:00:08,540
Hello, in this bootstrap video, I am going to show you how to implement tool tips in Bootstrap five.

2
00:00:08,550 --> 00:00:14,780
So what is a tool tip if I go to the bootstrap website and a tool tip if you see the button.

3
00:00:14,780 --> 00:00:22,380
So if I click on click sorry, hover over, I should say, on this one little tooltip over it and it

4
00:00:22,400 --> 00:00:24,200
can provide some extra information.

5
00:00:24,380 --> 00:00:31,050
You might just explain what this button does, that on the right, bottom left and defined with HTML.

6
00:00:31,070 --> 00:00:32,940
So feel free to check that one out as well.

7
00:00:33,310 --> 00:00:39,560
You can check out the disabled state as well and a bunch of other stuff and all of the options that

8
00:00:39,560 --> 00:00:40,460
are available.

9
00:00:40,630 --> 00:00:45,900
I'm going to show you how to implement a basic one and then from there you can utilize this.

10
00:00:46,160 --> 00:00:56,480
So if they make sure you include Papadakis, that's something I've already had them already included

11
00:00:56,480 --> 00:00:59,480
when I set up bootstrapping the setup video.

12
00:00:59,840 --> 00:01:05,380
If you are new to this and have gone straight to this video for Tool Tips, make sure you got that there,

13
00:01:06,140 --> 00:01:06,630
OK?

14
00:01:06,890 --> 00:01:14,300
So what we're going to do is implement our just a similar button to what is on there.

15
00:01:14,660 --> 00:01:21,650
So type equal button and then I'll show you how to activate it via JavaScript.

16
00:01:21,950 --> 00:01:24,530
Can be a bit convoluted if you don't know what you're doing.

17
00:01:24,530 --> 00:01:31,460
The first time in between the secondary, feel free to check out my video on buttons for more information

18
00:01:31,460 --> 00:01:35,390
on buttons and epic button.

19
00:01:36,940 --> 00:01:51,760
And the data does toggle equal to temp and data, that placement equals bottom, though, if you want

20
00:01:51,760 --> 00:01:54,940
in the top, you've got top if you want on the left, upper left if you want to.

21
00:01:54,940 --> 00:01:56,740
On the right, you will put right on.

22
00:01:56,740 --> 00:02:03,910
The title is basically what appears in that tooltip on the tooltip on bottom.

23
00:02:04,270 --> 00:02:08,290
Obviously this is a sign that it's on the bottom, but they can say whatever you want.

24
00:02:09,100 --> 00:02:14,200
And honestly, the epic tip and currently if I go here.

25
00:02:15,760 --> 00:02:24,210
It doesn't appear we need to actually activate it in JavaScript, and that is up to us as the developers

26
00:02:24,210 --> 00:02:30,910
to that way, if for some reason maybe we've detected that they're on a mobile device, for example,

27
00:02:31,090 --> 00:02:33,990
this doesn't look very good on mobile devices, though.

28
00:02:34,000 --> 00:02:35,700
Very powerful now in twenty twenty.

29
00:02:36,130 --> 00:02:38,860
Still not powerful, obviously, as a desktop machine.

30
00:02:39,100 --> 00:02:41,230
And you might want to save some processing power.

31
00:02:41,660 --> 00:02:46,570
OK, so what options he calls

32
00:02:49,450 --> 00:02:50,140
code on?

33
00:02:50,770 --> 00:02:58,030
The only option on the poor is animation theory to put more options by then putting the other options

34
00:02:58,330 --> 00:03:01,210
like I showed you down.

35
00:03:02,280 --> 00:03:08,550
Here, a bunch of that, a lot of options are available for two tips now, what we need to do that can

36
00:03:08,550 --> 00:03:11,730
get the elements of all elements

37
00:03:13,890 --> 00:03:14,850
document.

38
00:03:16,150 --> 00:03:24,820
Don't get element by I do, and this is what we put here for the Odisho epic, Puttan.

39
00:03:26,570 --> 00:03:30,860
Now with a wall to tape a new

40
00:03:35,450 --> 00:03:38,530
bootstrap dot tooltip.

41
00:03:42,690 --> 00:03:47,400
Element options, and there we are.

42
00:03:47,850 --> 00:03:51,570
OK, so that should be it and thus activate itself.

43
00:03:51,650 --> 00:03:53,680
Go back, reload, hover.

44
00:03:54,510 --> 00:03:55,290
That's not working.

45
00:03:55,710 --> 00:03:58,220
Let me inspect, make sure we got no errors.

46
00:03:58,290 --> 00:04:00,450
We do have an error line.

47
00:04:00,460 --> 00:04:01,200
Thirty five.

48
00:04:05,220 --> 00:04:06,420
To be an equal sign, the.

49
00:04:07,620 --> 00:04:15,460
We load the tooltip on bottom, it's as simple as that for implementing tool tips, great for providing

50
00:04:15,460 --> 00:04:20,860
extra information without having all of the content on the website, which can look a bit cluttered.

51
00:04:21,160 --> 00:04:23,710
If you have any questions, feel free to pop me a message.

52
00:04:23,710 --> 00:04:27,400
And as usual, I look forward to seeing you in the next video.