Hover to trigger popover
Description
The following code shows how to hover to trigger popover.
Example
<!-- w w w . j a v a 2 s. co m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<style type='text/css'>
.userInfo {
display: none;
}
.user {
width: 50px;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('.user').each(function() {
var $this = $(this);
$this.popover({
trigger: 'hover',
placement: 'right',//left
html: true,
content: $this.find('.userInfo').html()
});
});
});
</script>
</head>
<body style='margin:30px'>
<div class="user">
user 1
<div class="userInfo">
<p>He likes pie!</p>
</div>
</div>
<div class="user">
user 2
<div class="userInfo">
<p>He likes cake!</p>
</div>
</div>
</body>
</html>