javascript - Bootstrap tooltip on focus with different field names - Stack Overflow

admin管理员组

文章数量:1356377

I have some code written out to show the bootstrap tooltip on focus of an input.

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

<script src=".11.1/jquery.min.js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href=".3.5/css/bootstrap-theme.min.css">
<!-- Latest piled and minified JavaScript -->

<script src=".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"/>

I have some code written out to show the bootstrap tooltip on focus of an input.

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest piled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn./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"/>

I have multiple fields in my form and each one needs to show a tooltip. Is there a way to get the name from each input field for the script above? The fields are dynamic and constantly added or removed. So I don't want to have to keep updating the script with old / new fields.

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Jul 30, 2015 at 15:00 Anwar 4,25655 gold badges4343 silver badges6767 bronze badges asked Jul 30, 2015 at 14:55 TheDizzleTheDizzle 1,57455 gold badges3535 silver badges8080 bronze badges 3

• Be careful using bootstrap and jquery together, I remend you to download jquery without tooltip widget, sometimes it enters in conflict with bootstrap tooltip widget. – Vinicio Ajuchan Commented Jul 30, 2015 at 15:02
• @VinicioAjuchan Did you make a typo in your ment? jQuery is a dependency for Bootstrap's javascript ponents. – Josh Commented Jul 30, 2015 at 15:06
• @JoshJanusch you are right, it occurs with jQuery UI. don't keep in mind my previous ment – Vinicio Ajuchan Commented Jul 30, 2015 at 15:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

If you need the tooltip in all of them you can just use:

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

If you dont need it in all of your input texts, consider using a class.

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest piled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn./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"/>

You can also init tooltips for all type=text "tooltipable" inputs, based on the presence of the title attribute (so you know you want to show tooltip for it):

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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"/>

本文标签： javascriptBootstrap tooltip on focus with different field namesStack Overflow