Bootstrap - 在文档准备好时显示popover

Question

在我的应用程序中,当用户登录并浏览他们的名字时,导航栏的右上角会显示头像.例:

<li>
   <a class="btn" href="#">
       <img id="user-avatar" src="{{ $userAvatar }}" alt="" /> {{ $userNickname }}
   </a>
</li>

但是我希望弹出窗口显示5秒,低于用户名/头像区域,显示"您已成功登录".这是可能的,因为我有一个成功登录后仅为页面设置的会话(在页面被更改/刷新后它被销毁).

我的计划是已经在列表项上设置了popover属性,并且当设置登录会话时,它会运行一些javascript来触发弹出窗口:

<li id="popover" rel="popover" data-content="You Logged In" data-original-title="Success!">
   <a class="btn" href="#">
      <img id="user-avatar" src="{{ $userAvatar }}" alt="" /> {{ $userNickname }}
   </a>
</li>
@if (Session::has('login_success'))
    <script type="text/javascript">
       $(document).ready(function() {
          $('#popover').popover();
       });
    </script>
@endif

我知道我错过了数据动画="底部",但无论我做什么都没有发生!

Answer 1

代码: $('#popover').popover();只是实例化元素的popover,它不会显示它.

你想用:

<script type="text/javascript">
   $(document).ready(function() {
      $("#popover").popover('show');
   });
</script>

如果在浏览器中无法工作,请在窗口完全加载后运行它:

<script type="text/javascript">
    $(window).load(function(){
       $("#popover").popover('show');
    });
</script>