Menu
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?
229
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');
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
