How to bind element attributes with Bootstrap Popover html using jquery or JavaScript?
Question
Given below is a code that contains a button. On the button's click a popover is shown with hard-coded details.
Is it possible for the popover to get details from the Buttons attributes eg
data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"Second issue is that the popover is closed when the user click again on the button. Is it possible to to stop it and instead of this can we give a close button in popover and on its click the popover should be closed.
Many thanks for any help.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('[data-toggle="popover"]').popover({ placement: 'top', html: true, title: 'User Info <a href="#" class="close" data-dismiss="alert">×</a>', content: '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>' }); $(document).on("click", ".popover .close", function() { $(this).parents(".popover").popover('hide'); }); }); </script> <style type="text/css"> .bs-example { margin: 160px 10px 0; } .popover-title .close { position: relative; bottom: 3px; } </style> </head> <body> <div class="bs-example"> <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2016-03-10 06:58:46
Just an example, should help you:
- Dynamic content:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('[data-toggle="popover"]').popover({ placement: 'top', html: true, title: function() { return $(this).data('title') + '<a href="#" class="close" data-dismiss="alert">×</a>'; }, content: function() { return $(this).data('content'); } }); $(document).on("click", ".popover .close", function() { $(this).parents(".popover").popover('hide'); }); }); </script> <style type="text/css"> .bs-example { margin: 160px 10px 0; } .popover-title .close { position: relative; bottom: 3px; } </style> </head> <body> <div class="bs-example"> <button type="button" class="btn btn-primary" data-toggle="popover" data-title="Custom Title" data-content="Custom Content">Click Me</button> </div> </body> </html>
- Look at the popover
triggerparam:
How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.