javascript - 具有不同字段名称的焦点的 Bootstrap 工具提示

Question

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

$('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"/>

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

Answer 1

如果你需要所有工具提示，你可以使用:

$('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"/>