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

this is part 43 of bootstrap tutorial in
this video we'll discuss the bootstrap
tooltip plug-in creating tooltips using
bootstrap is straightforward let's see
how to create a tooltip for a button
that looks like this let's flip to
visual studio first let's create the
button element let's use button classes
BTN and BTN primary let's also specify
title attribute the title attribute
value will be displayed as the tooltip
we also need to specify data - toggle
attribute and the value for this should
be tooltip and the text on this button
is going to be button let's save our
changes reload this page at this point
when I hover the mouse over this button
notice we get the standard tooltip we
want this tooltip to be styled by
bootstrap for bootstrap to be able to
style this tooltip we will have to
opt-in for that to opt-in we'll have to
write one line of jQuery code so within
our jQuery ready function we will have
to first find this button to find this
button we can give this button an ID and
use the jQuery ID selector but I am
going to use attribute value selector
notice this button has got data - toggle
attribute and a value so let's use
attribute value selector so within our
jQuery ready function let's use
attribute value selector so this
selector is going to find this button
and on this let's call tooltip function
let's save our changes reload this page
and at this point when I have the mouse
over this button notice the tooltip is
styled by bootstrap by default the
tooltip is placed on top of the button
we can customize the placement the
placement can be on the top bottom left
or right so to customize the placement
we use data - placement attribute and
let's say we want to place the tooltip
at the bottom so the value is going to
be bottom let's reload this page and at
this point when I have the mouse over we
get the tooltip at the bottom now let's
look at a few other options that are
available to customize the behavior of
the tooltip plug-in these options can be
specified either by using data - and to
be
or JavaScript we have just seen how to
specify placement option using data -
attribute here let's see how to specify
this using javascript so let's first
remove it from the button element so to
our tooltip function we are going to
pass a JavaScript and then specify our
placement option let's place the tooltip
on the right hand side let's save our
changes reload this page and we hover
over this button notice the tooltip is
on the right hand side we can also
specify title and JavaScript so let's
remove this title attribute from here
and specify it right here and let's
change the title to bootstrap tooltip
from JavaScript and let's change this
equal to to a column at this point when
we reload our page and when I hover over
this notice we get our updated title as
the tooltip animation by default the
tooltip fades in and fades out if you
don't want that animation then set
animation option to false when we do
this the tooltip appears and disappears
immediately without that fade effect
delay time delay for showing and hiding
the tooltip value can be number in
milliseconds or an object let's say for
example we want the animation to run for
500 milliseconds so first let's turn on
animation and let's specify delay so
here we are specifying the delay as 500
milliseconds so the tooltip will take
400 milliseconds to show and find in
milliseconds to hide let's save our
changes reload this page now look at
this it's going to take finded
milliseconds to show and 500
milliseconds to hide and we have that
fade effect there
now if you want different numbers for
showing and hiding then you can specify
the value as a javascript object and
then specify a value for show let's say
for example we want to show it you know
within 300 milliseconds and hide it
within 500 milliseconds so to show it it
takes 300 and to hide it it takes 500
milliseconds HTML specifies the HTML for
the tooltip value can be true or false
default is false at the moment we
haven't specified the HTML option so the
default is false so if we specify HTML
for this title attribute let's specify
an h3 element here help
let's close the h3 element and then
let's include a simple paragraph element
here and let's say click to submit this
page and let's close the paragraph so we
have HTML here but we haven't turned on
the HTML option so at this point when we
reload this page and when I hover over
this button notice the HTML is displayed
Aziz now if you want this to properly
work you will have to turn on HTML by
setting HTML option to true let's reload
this page and at this point when I hover
over this look at that
it's working is expected thank you for
listening and have a great day