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?
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
Reset to default 12I 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');
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>
Run it after window is loaded like so:
$(window).load(function(){
$("#example").popover('show');
});
$("#example").popover({'placement':'bottom'}).popover('show');
$(document).ready(function(){
window.setTimeout("$('#example').popover('show')",1000);
}
It works for me. Try it out.
Trigger the click event of that anchor tag using jQuery like
$('[id$='example' ]').trigger("click");