Bootstrap popover Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 45 of bootstrap tutorial in
this video we'll discuss the bootstrap
popover plugin bootstrap popover is an
extension to tooltip working with the
popo a plugin is very similar to working
with the tooltip plug-in the difference
is popover has an option to display both
a title and content while tooltip only
has an option to display a title a
popover looks like this notice it has
got both title and content at the moment
what we've got here is a button we are
using two button classes BTN and median
primary notice we have said both ID and
title attributes data - toggle attribute
is set to tool there within our jQuery
ready function we are finding this
button using its ID and then calling the
tooltip method so at this point when we
hover over this button we get the
tooltip as expected we discuss this in
our previous videos now let's see how
easy it is to convert this tool tip to a
popover remember the Papa has also got
content along with the title to get this
content we are going to use a different
attribute and that is data - content
attribute we also need to make a couple
of other changes to come with this tool
tip - a popover at the moment notice
data - toggle attribute is set tooltip
we need to change that to popover
similarly we need to change this method
from tool tip to popover let's save our
changes reload our webpage at this point
when we click on the button we get the
popover and when we click on it again
the popover is dismissed so the trigger
here is clicked
that's the default now at the moment
when we click on it we get the popover
and when we click anywhere outside the
button look at that the popover is not
dismissed if you want the pop over to be
dismissed when you click outside the
button then we use a different trigger
so let's first add the data - trigger
attribute and the default value for this
is click and I'm going to change that to
focus so when the button loses focus the
popover is going to be distance look at
this when I click on the button we get
the popover and when I click outside the
button anywhere and when the button
loses focus look at that the popover is
dismissed now if you want this popover
on hover then change the trigger from
focus to hover so when we reload this
page and on however we get the popover
as expected we can also display images
using popovers let's display penguins in
a popover like this so within our
solution Explorer
we've got penguins image in the images
folder so the content now for our
pop-ups is going to be an image element
so let's include an image element source
is going to be images for slash penguins
dot jpg and let's also change the title
from popover title to penguins all right
so the content here is HTML so we have
to tell that and we tell that by using
data - HTML attribute and I'm going to
set that to to true
and let's display the image you know the
popover below the button so I am also
going to set data - placement attribute
and only for that is going to be bottom
because we want the image at the bottom
let's see what changes reload up web
page and at this point look at this when
I hover the mouse over this we get the
image but it's too large now we want
this image to be responsive so if you
want this to be responsive on this image
element let's use IMG responsive class
let's see what changes reload our web
page and look at this now we get the
image as expected now working with this
popover is very similar to working with
the tooltip plug-in majority of the
options methods and events as you can
see from this table you know they are
very similar between the Papua and
tooltip plugins thank you for listening
and have a great day