Q:

How to make Bootstrap popover appear/disappear on hover instead of click

mhmadesk
Save to bookmark
|
2022-05-19
|
  190 
Easy
0

How to make Bootstrap popover appear/disappear on hover instead of click

Bootstrap,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-19
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the Popover's trigger Option

By default, the Bootstrap popover is appearing when you click on the trigger element. However, if you want to show hide the popovers on mouse hover rather than click, you can do this simply by setting the popover's trigger option to hover. Let's see how it actually works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Display Bootstrap Popover on Mouse Hover</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover'
    });
});
</script>
<style>
	.wrapper{
    	margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="wrapper">
    <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
    <button type="button" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Another popover">Another popover</button>
    <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
    <button type="button" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="The last popover!">Last popover</button>
</div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

BOOTSTRAP / SASS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to insert image inside Bootstrap popover... >>
<< How to insert close button in Bootstrap popover...