Question

我有以下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>

我希望在页面加载时显示它，所以我添加了

$('#example').popover('show')

到文档末尾的函数如下：

<script>
$(function ()
{ $("#example").popover(show);
});
</script>

但没有发生任何事情。

在页面加载时，我什么都没得到。但是当我在控制台中运行$('#example').popover('show')时，我得到了popover工作。如何在页面加载后显示弹出窗口？

Answer 1

我发现这种方式很方便：

你可以一举触发'show'并设置选项：

$('#elementToPointAt').popover({
   'placement':'bottom',
   'content':'Look at me!'
}).popover('show');

Answer 2

您忘记了show的引号。这有效：

$(function () { 
  $("#example").popover('show');
});

完整的例子是：

<!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>

Answer 3

在加载窗口之后运行它：

$(window).load(function(){
  $("#example").popover('show');
});

Answer 4

$("#example").popover({'placement':'bottom'}).popover('show');

Answer 5

$(document).ready(function(){

window.setTimeout("$('#example').popover('show')",1000);

}

它对我有用。尝试一下。

Answer 6

使用类似

的jQuery触发该锚标记的click事件

$('[id$='example' ]').trigger("click");

在页面加载上加载Twitter Bootstrap Popover

6 个答案: