Question

我写了一些代码来显示输入焦点的bootstrap工具提示。

＆＃13;

$('input[type=text][name=secondname]').tooltip({
    placement: "right",
    trigger: "focus"
    });

＆＃13;

<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"/>

＆＃13;

我的表单中有多个字段，每个字段都需要显示工具提示。有没有办法从上面的脚本的每个输入字段中获取名称？这些字段是动态的，不断添加或删除。因此，我不想继续使用旧/新字段更新脚本。

Answer 1

如果您需要所有这些工具提示，您可以使用：

$('input[type=text]').tooltip({
     placement: "right",
     trigger: "focus"
});

如果您在所有输入文本中都不需要它，请考虑使用课程。

 <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"/>


$('.tooltipped').tooltip({
     placement: "right",
     trigger: "focus"
});

Answer 2

您还可以为所有type = text＆＃34; tooltipable＆＃34;初始化工具提示。输入，基于title属性的存在（因此您知道要显示工具提示）：

＆＃13;

$(':text[title]').tooltip({
    placement: "right",
    trigger: "focus"
});

＆＃13;

<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"/>

＆＃13;

使用不同字段名称的焦点上的Bootstrap工具提示

2 个答案: