How to make Bootstrap popover appear/disappear on hover instead of click?
Bootstrap provides in-built support for making popovers. A popover is a content box that appears when a user triggers a specific event with specified element selector. Here, we will discuss methods to trigger popover using “hover” instead of “click”.
Method 1: Here, we will specify popover trigger in ‘hover’ using jQuery initialization only. We can add title details as well as trigger criteria in popover() function itself as parameters.
- Program:
<!-- Using jQuery initialization only -->
<!DOCTYPE html>
<
html
>
<
head
>
<!-- CDN's required -->
<
link
rel
=
"stylesheet"
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
>
</
script
>
<
script
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
center
>
<
h1
style
=
"color:green;"
>w3wiki</
h1
>
<
b
>
Bootstrap popover appear/disappear
on hover instead of click
</
b
>
<
br
><
br
>
<
button
class
=
"btn btn-success"
data-toggle
=
"popover"
data-content
=
"Computer Science Portal for Beginner"
data-placement
=
"bottom"
>
Hover here!
</
button
>
</
center
>
</
div
>
<
script
>
$('[data-toggle="popover"]').popover({
title: "w3wiki",
trigger: "hover"
});
</
script
>
</
body
>
</
html
>
- Output:
Method 2: Here we will be using ‘data-trigger’ attribute. We can also achieve the same by placing ‘title’ and ‘data-trigger’ as attributes without specifying them as parameters in popover() method.
- Program:
<!-- Using data-trigger attribute -->
<!DOCTYPE html>
<
html
>
<
head
>
<!-- CDN's required -->
<
link
rel
=
"stylesheet"
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
>
</
script
>
<
script
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
center
>
<
h1
style
=
"color:green;"
>w3wiki</
h1
>
<
b
>
Bootstrap popover appear/disappear
on hover instead of click
</
b
>
<
br
><
br
>
<
button
class
=
"btn btn-success"
title
=
"w3wiki"
data-toggle
=
"popover"
data-trigger
=
"hover"
data-content
=
"Computer Science Portal for Beginner"
data-placement
=
"bottom"
>
Hover here!</
button
>
</
center
>
</
div
>
<
script
>
$('[data-toggle="popover"]').popover();
</
script
>
</
body
>
</
html
>
- Output:
Contact Us