From the course: Bootstrap 4 Essential Training
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Display popovers - Bootstrap Tutorial
From the course: Bootstrap 4 Essential Training
Display popovers
- [Instructor] PopOvers are another component that lets you display additional content and are triggered by events like clicks. Now they're almost exactly like tool tips so if you're coming from that video, this is going to be pretty similar but they have a slightly different style. So let's take a look at what you need to get one going. In order to set these up, you simply add a data-toggle attribute of popover to an element, and then you can add a title attribute with some text to it as well as a data-content where you add some additional content. So the text would become like, the headline of the popover, and then the data content would be the sub-content underneath that, because they do have more of a headline section in them. Now in order to get these started, you do need to activate them, and you have to do that through jQuery so you use the jQuery, sort of start-up function, and then somewhere in there, you can activate all of the popups on the current page by targeting the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Interactive component overview1m 24s
-
(Locked)
Add tooltips7m 21s
-
(Locked)
Display popovers5m 20s
-
(Locked)
Create alerts4m 14s
-
(Locked)
Use dropdowns8m 15s
-
(Locked)
Add collapse accordions12m
-
(Locked)
Use modals12m 3s
-
(Locked)
Build carousels13m 37s
-
(Locked)
Use scrollspy6m 56s
-
(Locked)
Toasts6m 10s
-
(Locked)
Spinners5m 34s
-
(Locked)
Pagination3m 21s
-
(Locked)
Stretched links3m 11s
-
(Locked)
Embeds3m 9s
-
(Locked)
-