Всплывающая подсказка Bootstrap не будет отображаться

Да, я знаю, что это дубликат, но все ответы, которые я прочитал, не помогли мне, у меня есть рабочий пример, из w3school, он работает, а мой doesn 't, то, что я пытаюсь сделать, это показать всплывающую подсказку, предупреждающую пользователя использовать только числа, но вместо этого он просто обновляет страницу.Всплывающая подсказка Bootstrap не будет отображаться

Это мой полный код HTML страницы:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/ 
    <script type="text/javascript" src="js/tooltip.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var previous; 
     $(document).ready(function(){ 
      $('.btn').tooltip(); 
     }); 
     //Buy Button JS code 
     $(function() { 
      $("#searchform").bind('submit', function() { 
       var str = $('#search-form').val(); 
       if (str.match(/^[0-9]*$/)) { 
        $('#search-form').tooltip({title="You did good :)"}); 
       } 
       else 
       { 
        $('#search-form').tooltip({title="Please enter numbers ONLY !"}); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
<div class="box"> 
    <form class="search-form" method="post" id="searchform"> 
     <input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/> 
     <button type="submit" name="submit" class="btntxt">Validate</button> 
     <div id="search_results"></div> 

    </form> 
</div> 

</body> 
</html>

я не поставил data-toggle:"tooltip" ни title:"sometitlehere" в настройках элемента, потому что i don't really need it.

источник

2016-03-30 Omarrrio

типа кнопка представить так освежает страницу –

Как так? Я думал, что я сделал код js, проверяя входной текст, прежде чем он сделает что-нибудь еще. – Omarrrio

Проверьте, загружается ли 'bootstrap.min.js'. – sahil

Есть несколько ошибок в коде,

//it should be title: and not title= 
$('#search-form').tooltip({title:"You did good :)"});

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

var previous; 
 

 
     //Buy Button JS code 
 
     $(function() { 
 
      $("#searchform").bind('submit', function() { 
 
       var newTooltip=""; 
 
       var str = $('#search-form').val(); 
 
       if (str.match(/^[0-9]*$/)) { 
 
        newTooltip = "You did good :)"; 
 
       } 
 
       else 
 
       { 
 
        newTooltip = 'Please enter numbers ONLY !';      
 
       } 
 
       
 
       $('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show'); 
 
       setTimeout(function(){ 
 
       $('#search-form').tooltip('hide').tooltip('destroy'); 
 
       }, 1500); 
 
       
 
      }); 
 

 
      
 
     });

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/ 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div class="box"> 
 
    <form class="search-form" method="post" id="searchform"> 
 
     <input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/> 
 
     <button type="submit" name="submit" class="btntxt">Validate</button> 
 
     <div id="search_results"></div> 
 

 
    </form> 
 
</div>

источник

2016-03-30 10:17:03 sahil

Хорошо, мы добиваемся прогресса, спасибо, но теперь мне нужно снова навести указатель мыши на ввод, чтобы показать подсказку инструмента, поэтому я добавил '.tooltip ('show'), но как отменить событие наведения? как вы можете видеть, я хочу, чтобы он понравился, оставайтесь на несколько секунд, затем исчезайте/исчезаете. – Omarrrio

Спасибо, теперь все, что у меня осталось, - это добавить изображение к названию. Еще раз спасибо. – Omarrrio

Вы инициализируете всплывающую подсказку в js? - всплывающие подсказки не будут отображаться, если у вас есть это в коде:

$(function(){ 
$("[data-toggle=tooltip]").tooltip(); 
})

ок - я просто посмотрел на свой код - у вас есть:

$('.btn').tooltip();

перечислены в Theree, но ваша кнопка имеет класс «btntxt», и вы также пытаетесь получить всплывающую подсказку в форме поиска, но у этого есть идентификатор «search-form» - ни одна из которых не будет затронута вашей декларацией всплывающей подсказки. Лучше всего использовать тот, который я дал в сообщении, так что все элементы со всплывающими подсказками могут отображать их. Установка их на отдельные классы или идентификаторы слишком ограничительна, если вы забываете, что ваш класс или идентификатор не совпадает с тем, который указан в js.

источник

2016-03-30 09:40:17 gavgrif

, ваша строка будет ТОЛЬКО работать, если я поместил 'data-toggle' в свой элемент, который я не хочу, хотя я попытался изменить его на' $ («# search-form»). Tooltip(); ' , все еще освежающий и ничего не делает.EDIT: это была опечатка, в моем коде это правильно, все равно ничего не выходит из этого. – Omarrrio

тогда вам также нужно будет объявить триггер для всплывающей подсказки («hover» или «click»). варианты, которые я думаю – gavgrif

Весь смысл моего кода заключается в том, чтобы не использовать наведение или щелчок, а принудительно показывать подсказку в виде ошибки. – Omarrrio

Вы используете форму, так что вы должны вернуть истинные или ложными на валидацию действий, так что ваш код должен быть как

if (str.match(/^[0-9]*$/)) { 
       $('#search-form').tooltip({title="You did good :)"}); 
       return true; 
      } 
      else 
      { 
       $('#search-form').tooltip({title="Please enter numbers ONLY !"}); 
       return false; 
      }

источник

2016-03-30 09:43:08

у вас есть этот приказ скриптов:

<script type="text/javascript" src="js/tooltip.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ли подсказка .js требует jquery? - если да, возможно, потребуется, чтобы инвертировать, что порядок

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/tooltip.js"></script>

источник

2016-03-30 09:50:38 gavgrif

Очень хорошее наблюдение, но, к сожалению, все еще не работает. – Omarrrio

Всплывающая подсказка Bootstrap не будет отображаться

ответ

Смежные вопросы