如何在按鈕中放置bootstrap popover工具提示
[英]How to put bootstrap popover tooltip in button
問題描述
如何將彈出工具提示放在第一個和第二個按鈕上？
<div class="btn-group pull-right" data-toggle="buttons" style="top:26px;z-index:2;">
<label class="make-small btn btn-default" id="first_button_func">
<span>First Button</span>
</label>
<label class="make-small filter-column btn btn-default active">
<input type="checkbox" autocomplete="off" checked=""> <span>Second Button</span>
</label>
</div>
我需要像工具提示這樣的東西“這是第一個按鈕”
3 個解決方案
解決方案1
0 2016-08-08 10:40:48
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example of Bootstrap Popover with Close Button</title> <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: 200px 150px 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">First </button> <br/> <br/> <button type="button" class="btn btn-primary" data-toggle="popover">Second </button> </div> </body> </html>
解決方案2
0 已采納 2016-08-08 10:40:52
如工具提示中所述，您需要添加一個
-
data-toggle="tooltip" -
title="...."
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="btn-group pull-right" data-toggle="buttons" style="top:26px;z-index:2;"> <label class="make-small btn btn-default" id="first_button_func" data-toggle="tooltip" title="Tooltip test for First Button"> <span>First Button</span> </label> <label class="make-small filter-column btn btn-default active" data-toggle="tooltip" title="Tooltip test for Second Button"> <input type="checkbox" autocomplete="off" checked=""> <span>Second Button</span> </label> </div>
解決方案3
0 2016-08-08 10:41:57
<div class="btn-group pull-right" data-toggle="buttons" style="top:26px;z-index:2;">
<label class="make-small btn btn-default" id="first_button_func">
<span data-toggle="tooltip" data-placement="left" title="This is the first button">First Button</span>
</label>
<label class="make-small filter-column btn btn-default active">
<input data-toggle="tooltip" data-placement="left" title="This is the second button" type="checkbox" autocomplete="off" checked=""> <span>Second Button</span>
</label>
</div>
這個添加到js文件...
$('[data-toggle="tooltip"]').tooltip();
如何在 JavaScript 的 Bootstrap-Popover 中放置 for 循環？
[英]How to put for loop in Bootstrap-Popover in JavaScript?
如何編寫用於Bootstrap popover和工具提示內容的html
[英]How do I encode html for Bootstrap popover and tooltip content
如何用彈出窗口內的按鈕關閉bootstrap-popover？
[英]How can i close a bootstrap-popover with a button inside the popover?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.