引导工具提示不会显示答案

【问题标题】：Bootstrap tooltip would not show up引导工具提示不会显示
【发布时间】：2016-03-30 09:30:33
【问题描述】：

是的，我知道这是重复的，但是我读过的所有答案都对我没有帮助，我有一个来自 w3school 的并排工作示例，它有效，而我的无效，我是什么试图做的是显示一个工具提示，警告用户只使用数字，但它只是刷新页面。

这是我的完整 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。

【问题讨论】：

按钮类型是提交所以它是刷新页面
怎么样？我以为我让 js 代码在执行其他任何操作之前检查输入文本。
检查bootstrap.min.js 是否正在加载。
data-toggle="tooltip" 正是显示/隐藏您的工具提示的内容。在您的情况下，您应该将其添加到按钮并将类型从 submit 更改为 button，然后在 javascript / jquery 中做类似`$(this).form().submit() 的事情。如果通过您的检查，则提交表单。
@Sahil 我该怎么做？我应该在$(document).ready(function(){ 设置警报吗？ @Spluf 在我链接的 w3school 示例中（第二个链接），他们不使用它，它可以工作。

标签： javascript jquery html twitter-bootstrap tooltip

【解决方案1】：

你的代码有几个错误，

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

一旦您的代码执行，上面的行就会初始化工具提示。之后如果更新提示标题，则需要销毁提示并使用新标题重新初始化。

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>

【讨论】：

好的，我们正在取得进展，谢谢，但现在它需要我重新悬停在输入上以显示工具提示，所以我添加了.tooltip('show)，但是如何否定悬停事件？如您所见，我希望它喜欢，保持几秒钟然后消失/消失。
谢谢，现在我只剩下在标题选项中添加图片了。再次感谢。

【解决方案2】：

您正在使用表单，因此您需要在验证操作时返回 true 或 false，因此您的代码应该像

 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;
            }

【讨论】：

【解决方案3】：

你是在 js 中初始化工具提示吗？ - 除非您在代码中有此提示，否则不会显示工具提示：

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

好的 - 我刚刚看了你的代码 - 你有：

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

列在其中，但您的按钮具有“btntxt”类，并且您还试图在搜索表单上获取工具提示 - 但其 id 为“search-form” - 两者都不会受到影响通过您的工具提示声明。最好使用我在帖子中给出的那个，以便所有带有工具提示的元素都可以显示它们。如果您忘记了您的类或 id 与 js 中列出的不同，那么将它们设置为单独的类或 id 就太严格了。

【讨论】：

再一次，只有当我将data-toggle 放在我不想这样做的元素上时，您的行才会起作用，尽管我尝试将其更改为$("#search-form").tooltip();，但仍然令人耳目一新并且什么都不做。编辑: 那是一个错字，在我的代码中是正确的，但仍然没有任何结果。
那么您还需要声明工具提示的触发器（“悬停”或单击“）是我认为的选项
我的代码的重点是不使用悬停或单击，而是将工具提示强制显示为错误。
如果这只是为了向用户显示错误消息，那么工具提示可能不是最好的方法 - 您可以简单地有一个带有错误的 div 并根据验证的情况显示/隐藏它代码。工具提示实际上是一种 UI / UX 功能，包含有关元素的额外信息，通常由用户将鼠标悬停在元素上触发，然后显示额外信息。错误消息是您在此处尝试实现的目标 - 不是工具提示
@Omarrrio，有两种方法可以显示工具提示：1. 通过 javascript 代码，您可以绑定到单击、悬停等事件以及 2. 使用数据切换等属性的位置。你不想使用任何一个，那么就不要使用工具提示。因为你不能……

【解决方案4】：

你的脚本有这个顺序：

<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>

tooltip.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>

【讨论】：