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

this is part 44 of bootstrap tutorial in
this video we'll discuss how to manually
trigger a bootstrap tooltip one of the
options that can be passed to the
tooltip method is the trigger option the
trigger option specifies how the tooltip
should be triggered here are the values
that can be used with the trigger option
multiple triggers can be specified by
separating them with a single space this
manual trigger cannot be combined with
any other triggers let's understand this
trigger option with an example let's
design a web page with this label name
text box and this info icon so let's
slip to visual studio first let's
include the label name let's also
include an input element of type text
let's give it an ID let's call it txt
name let's also include the title
attribute the value for this title
attribute is going to be bootstrap
tooltip the title attribute value will
be displayed as the tooltip we also need
to include data - toggle attribute and
the value for this attribute should be
tooltip and we also need this info icon
next to the textbox to get this info
icon we are going to use this bootstrap
glyph icon look at the name glyph I can
cliff I can info sign so to get that
icon next to the text box let's include
a span element and a class of this one
is going to be cliff icon cliff icon
info sign and let's use the jQuery ID
selector within this ready function find
the text box by its ID and on this we
are going to call tooltip method at the
moment notice we have not specified any
explicit value for the trigger option
let's save our changes reload our
webpage the default value for the
trigger option is however focus so the
default is multiple triggers me
when the textbox receives focus look at
that at the moment the focus is within
the address bar now when I press the tab
key the textbox receives focus and as
soon as the textbox receives focus look
at that the tooltip is triggered
similarly when we hover over this text
box the text box tool tip is triggered
that's because the default trigger value
is hover focus now let's say for example
instead of triggering the tooltip on
hover or focus we want it to be
triggered only when we click on this
text box we can very easily achieve that
by using the trigger option so let's go
ahead and pass the trigger option to our
tooltip method so the value for this
trigger option is going to be click
let's see what changes reload our page
and at this point look at that when I
hover you know over this text box or
when the text box receives focus the
tooltip is not triggered but when we
click within the text box that's when
the tooltip is triggered
now instead of triggering this tooltip
on click on this text box we want that
tooltip to be triggered when we click on
this icon now to achieve that we're
going to use manual trigger so the first
thing that I'm going to do is set the
trigger option to manual let's save our
changes reload our page and at this
point look at this when we click in
within the text box or when the text box
receives focus or when we hover over
this text box you know we don't get the
tooltip trigger and even when we click
on this icon you know the tooltip is not
triggered we will have to handle the
click event and then manually call the
tooltip method so first of all let's
give this icon an ID so let's call this
info icon and then let's use jQuery ID
selector with an hour ready function
find the
and let's associate click event handler
so when we click on the icon we want to
execute some code which is going to be
part of this function so what do we want
to do we want to find this textbox using
its ID and then we are going to call the
tooltip function and we are going to
pass the string toggle let's say what
changes reload of a webpage and at this
point look at this when we click on the
icon the bootstrap tooltip is triggered
if I click on the icon once again the
tooltip will be dismissed so it's
struggling the tooltip there now if you
want the tooltip to be triggered on
however of this icon simply change the
event handler from click to hover let's
save our changes
reload a web page and at this point when
we hover over this info icon look at the
add the tooltip is triggered thank you
for listening and have a great day