title: Bootstrap - Show popover on document ready
body: <p>on my application, when a user is logged in and browsing their name and avatar is displayed in the top right of the navbar. Example:</p>
  
  <pre><code>&lt;li&gt;
     &lt;a class="btn" href="#"&gt;
         &lt;img id="user-avatar" src="{{ $userAvatar }}" alt="" /&gt; {{ $userNickname }}
     &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>However I would like a popover to show for 5 seconds, below the username/avatar area that says "You have successfully logged in".  This is possible, as I have a session which is set for only the page after a successful login (after the page is changed/refreshed it is destroyed).</p>
  
  <p>My plan was to have the popover attributes set on the list item already, and when the login session is set it run a bit of javascript to trigger the popover:</p>
  
  <pre><code>&lt;li id="popover" rel="popover" data-content="You Logged In" data-original-title="Success!"&gt;
     &lt;a class="btn" href="#"&gt;
        &lt;img id="user-avatar" src="{{ $userAvatar }}" alt="" /&gt; {{ $userNickname }}
     &lt;/a&gt;
  &lt;/li&gt;
  @if (Session::has('login_success'))
      &lt;script type="text/javascript"&gt;
         $(document).ready(function() {
            $('#popover').popover();
         });
      &lt;/script&gt;
  @endif
  </code></pre>
  
  <p>I know I'm missing the data-animation="bottom", but whatever I do just nothing happens!</p>