Как отображать разные заголовки для всплывающей подсказки (Bootstrap) и html проверять форму?

Я пытаюсь показать два разных заголовка для всплывающей подсказки (Bootstrap) и стандартные формы проверки html.

Пример кода для http://jsfiddle.net/00kvznLu/

<form data-toggle="validator" role="form" class='containter'>    
  <div class="form-group">
    <label for="inputTwitter" class="control-label">Twitter</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" data-toggle="tooltip" title="Do it here..." pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1000hz" required>
    </div>
  </div>
  <div class="form-group">
    <input type="submit" value="Check Form">
  </div>
</form>

Но почему-то у меня не отображается всплывающая подсказка, а также на http://getbootstrap.com/javascript/#tooltips

Можно ли сделать так, чтобы при перемещении компьютерной мышки показывался title="messages1", а вывод ошибки "pattern" на стандартное сообщение "Введите данные в указанном формате". добавлен заголовок = "messages2"?

Можно ли сделать вот так tooltip-title="messages1" и error-pattern-title="messages2"?

Подсказка начальной загрузки:

название 1

Сообщение об ошибке:

название 2

Обновление 1: добавлено data-title="Custom Title"

<input type="text" data-toggle="tooltip" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" data-title="Custom Title" title="Do it here.." id="inputTwitter" placeholder="1000hz" required>

javascript validation html twitter-bootstrap twitter-bootstrap-tooltip
person Kolya_Net    schedule 25.03.2016    source источник
comment
Вы имеете в виду изменить всплывающую подсказку, если форма недействительна при отправке?   -  person StudioTime    schedule 25.03.2016
comment
@DarrenSweeney Я хочу отображать два разных сообщения в двух разных местах (добавлено изображение, надеюсь, будет понятно).   -  person Kolya_Net    schedule 25.03.2016
comment
это нормально? jsfiddle.net/00kvznLu/1   -  person Rajshekar Reddy    schedule 25.03.2016
comment
@Reddy в вашем коде вы исправили отображение всплывающей подсказки, но сообщение больше не отображается вместе с сообщением об ошибке (второе изображение обведено красным)   -  person Kolya_Net    schedule 25.03.2016
comment
@Kolya_Net дайте мне знать, если мой ответ поможет.   -  person Rajshekar Reddy    schedule 25.03.2016
comment
@Reddy Почти все правда. Добавлен атрибут данных jsfiddle.net/e278e33w Я получил то, что хотел. Не могли бы вы изменить свой ответ, тогда я его подтвердил.   -  person Kolya_Net    schedule 25.03.2016
comment
@Kolya_Net конечно, но зачем выбирать из атрибута данных, это повлияет на весь ваш сайт, который имеет этот атрибут. Я предлагаю использовать идентификатор для применения всплывающей подсказки, поскольку она будет нацелена только на этот элемент. Но если вы хотите настроить таргетинг на множество других элементов, лучшим выбором будет селектор класса. Только если вы хотите, чтобы весь ваш сайт имел заголовок всплывающей подсказки, такой же, как этот входной заголовок, тогда то, что вы предлагаете, работает. Но я понимаю, что это не то, что вам нужно. правильно??   -  person Rajshekar Reddy    schedule 25.03.2016
comment
@Kolya_Net Я понял твою точку зрения. Но примите во внимание и мое объяснение. :)   -  person Rajshekar Reddy    schedule 25.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

используйте приведенный ниже скрипт. Хитрость заключается в применении всплывающей подсказки к родительскому тегу ввода. Позвольте мне знать, если это помогает. Рабочая скрипка

$(function () {
  $('#inputTwitter').parent().tooltip({
   title : $('#inputTwitter').data('title')
  });
})
person Rajshekar Reddy    schedule 25.03.2016

arrow_upward
0
arrow_downward

Вы можете установить его следующим образом:

var newValue = 'This is a new message';
$(tooltip-selector).attr('title', newValue)
    .tooltip('fixTitle')
    .tooltip('show');

Я предлагаю вам использовать data-original-title вместо title поиграйте здесь

Проверьте @Mehmet Duran ответ

person Yuri    schedule 25.03.2016