Подсказка 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"/>

У меня есть несколько полей в моей форме, и каждое из них должно показывать всплывающую подсказку. Есть ли способ получить имя из каждого поля ввода для скрипта выше? Поля являются динамическими и постоянно добавляются или удаляются. Поэтому я не хочу постоянно обновлять скрипт со старыми/новыми полями.


javascript html jquery twitter-bootstrap
person TheDizzle    schedule 30.07.2015    source источник
comment
Будьте осторожны при совместном использовании bootstrap и jquery, я рекомендую вам скачать jquery без виджета всплывающей подсказки, иногда он вступает в конфликт с виджетом всплывающей подсказки начальной загрузки.   -  person Vinicio Ajuchan    schedule 30.07.2015
comment
@VinicioAjuchan Вы сделали опечатку в своем комментарии? jQuery — это зависимость для javascript-компонентов Bootstrap.   -  person Josh    schedule 30.07.2015
comment
@JoshJanusch, вы правы, это происходит с пользовательским интерфейсом jQuery. не бери в голову мой предыдущий комментарий   -  person Vinicio Ajuchan    schedule 30.07.2015

Ответы (2)


arrow_upward
6
arrow_downward

Если вам нужна всплывающая подсказка во всех из них, вы можете просто использовать:

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

person monxas    schedule 30.07.2015
comment
Да неужели? так просто? Просто сделать по одному для каждого типа ввода? или я могу сделать $('input') ? - person TheDizzle; 30.07.2015
comment
Вы можете использовать $('input') да - person monxas; 30.07.2015

arrow_upward
1
arrow_downward

Вы также можете инициировать всплывающие подсказки для всех входных данных type=text "tooltipable", основываясь на наличии атрибута title (так что вы знаете, что хотите показать всплывающую подсказку для него):

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

person dfsq    schedule 30.07.2015