问题描述
我写了一些代码来显示输入焦点上的引导工具提示。
$('input[type=text][name=secondname]').tooltip({ placement: "right", trigger: "focus" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/> <input data-toggle="tooltip" title="tooltip on third input!" type="text" placeholder="Focus me!" name="thirdname"/>
我的表单中有多个字段，每个字段都需要显示一个工具提示。 有没有办法从上面脚本的每个输入字段中获取名称？ 这些字段是动态的，并且会不断添加或删除。 所以我不想用旧/新字段不断更新脚本。
1楼
monxas
6
已采纳
2015-07-30 14:58:02
如果您需要所有工具提示，您可以使用：
$('input[type=text]').tooltip({
placement: "right",
trigger: "focus"
});
如果您不需要在所有输入文本中使用它，请考虑使用类。
$('.tooltipped').tooltip({ placement: "right", trigger: "focus" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <input class="tooltipped" data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/> <input class="tooltipped" data-toggle="tooltip" title="tooltip on third input!" type="text" placeholder="Focus me!" name="thirdname"/>
2楼
dfsq
1
2015-07-30 15:04:03
您还可以根据 title 属性的存在为所有 type=text "tooltipable" 输入初始化工具提示（因此您知道要为其显示工具提示）：
$(':text[title]').tooltip({ placement: "right", trigger: "focus" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/><br> <input data-toggle="tooltip" title="tooltip on third input!" type="text" placeholder="Focus me!" name="thirdname"/>