Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="de">
  <head>
      <meta content="Bootstrap Popover" name="description">
      <title>Bootstrap Popover</title>
      <!-- CSS -->
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
      <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
      <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700" rel="stylesheet" type="text/css">
      <link href="https://rawgit.com/janstieler/4a9875ef67fe3aa5d7fc/raw/e4bb9aecc02de01e275fd41ca52f2f1b3b15043e/redacted.css" rel="stylesheet" type="text/css">
      
      <!-- Javascript -->
      <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
      <title></title>
  </head>
  <body>
    <!-- Help Area-->
    <nav class="alert navbar-default alert-dismissable highlvl">
      <button class="close" data-dismiss="alert" type="button">
        <span class="fa fa-times"></span>
        <span class="sr-only">Close</span>
      </button>
      <ul class="list-unstyled list-inline">
        <li>
          <strong>Help:</strong>
        </li>
        <li>
          <a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a>
        </li>
        <li>
          <a href="http://fontawesome.io/icons/" target="_blank">FontAwesome</a>
        </li>
        <li>
          <a href="https://rawgit.com/" target="_blank">RawGit</a>
        </li>
      </ul>
    </nav>
<main class="content" role="main" id="demo">
    <header>
        <h1>Test</h1>
    </header>
    <section class="text list">
        <article class="list-item">
            <a href="" class="list-item-image" data-toggle="popover" data-content="ddgffgdsfgdfdgfdgfdsgfdsfgdsfgds">
                <img src="http://placehold.it/350x150" alt="image">
            </a>
        </article>
    </section>
</main>
  </body>
</html>
 
$(function() {
    //Bootstrap initialise
    $('[data-toggle="popover"]').popover();
    /*$("body").popover({ 
        selector: '[data-toggle=popover]',
        placement: 'bottom',
        trigger: 'hover'    
    });*/
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
janpro
0viewers