javascript - How to add multiple data-content in jQuery popup? -


i want popover show multiple data-content, i.e. 3 different lines of text inside popover. have following code, referred w3schols.

<!doctype html> <html lang="en"> <head>   <title>bootstrap example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body>  <div class="container">   <h3>popover example</h3>   <a href="#" data-toggle="popover" title="popover header" data-placement="bottom" data-content="info 1">toggle popover</a> </div>  <script> $(document).ready(function(){     $('[data-toggle="popover"]').popover();    }); </script>  </body> </html> 

the popover looks this.

popover example

i want popover show 3 more options "info 1", "info 2" , "info 3" list view. how can achieve this?

try:

demo;http://jsfiddle.net/jo6og612/

1)define div html want show in popover

<div class="container">    <h3>popover example</h3>    <a href="#" data-toggle="popover" title="popover header" data-placement="bottom">toggle popover</a>    <div id="popover-content">      <ul>          <li> info 1 </li>          <li> info 2 </li>          <li> info 3 </li>      </ul>    </div>    </div> 

2) add content , html properties of popover

<script> $(document).ready(function(){     $('[data-toggle="popover"]').popover(        html: true,         content: function() {            return $('#popover-content').html();        }     );    }); </script> 

Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -