Load a Twitter Bootstrap Popover on Page load
Question
I have the following BootStrap popover:
<a href='#' id='example' rel='popover' data-placement='left' data-content='Its so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>HEY</a>
And I want to show it when the page loads, so I added
$('#example').popover('show')
to a function as follows at the end of the document:
<script>
$(function ()
{ $("#example").popover(show);
});
</script>
but nothing happened.
On page load I get nothing. However when I run $('#example').popover('show') in the console I get the popover working. How can I make the popover be shown when the page has loaded?
6 answers
solution1
12 2014-02-18 22:21:20
I found this way to be convenient:
You can trigger the 'show' and set options in one fell swoop:
$('#elementToPointAt').popover({
'placement':'bottom',
'content':'Look at me!'
}).popover('show');
solution2
3 2012-10-05 16:11:42
You forgot the quotes for show . This works:
$(function () {
$("#example").popover('show');
});
Full example would be:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<a href='#' id='example' rel='popover' data-placement='right' data-content='Its so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>HEY</a>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script>
$(function() {
$("#example").popover('show');
});
</script>
</body>
</html>
solution3
0 2013-04-16 18:14:19
Run it after window is loaded like so:
$(window).load(function(){
$("#example").popover('show');
});
solution4
0 2015-01-12 04:15:14
$("#example").popover({'placement':'bottom'}).popover('show');
solution5
-1 2012-11-08 06:16:56
$(document).ready(function(){
window.setTimeout("$('#example').popover('show')",1000);
}
It works for me. Try it out.
solution6
-1 2014-08-30 07:49:51
使用jQuery触发该锚标记的click事件
$('[id$='example' ]').trigger("click");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.