Javascript 引导工具提示不会显示_Javascript_Jquery_Html_Twitter Bootstrap_Tooltip

Javascript 引导工具提示不会显示

javascript jquery html twitter-bootstrap

Javascript 引导工具提示不会显示,javascript,jquery,html,twitter-bootstrap,tooltip,Javascript,Jquery,Html,Twitter Bootstrap,Tooltip,是的，我知道这是重复的，但是我读过的所有答案对我都没有帮助，我有一个并排工作的例子，来自w3school，它有效，而我没有，我试图做的是显示一个工具提示，警告用户只使用数字，但它只是刷新页面这是我的完整html页面代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <link rel="sty

是的，我知道这是重复的，但是我读过的所有答案对我都没有帮助，我有一个并排工作的例子，来自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>


试验
/*---不使用引导css，因为它会弄乱表单布局，所以我将每个工具提示引用的块复制到我的style.css---*/
var-previous；
$（文档）.ready（函数（）{
$（'.btn'）.tooltip（）；
});
//购买按钮JS代码
$（函数（）{
$（“#searchform”）.bind（'submit'，函数（）{
var str=$（“#搜索表单”）.val（）；
如果（str.match（/^[0-9]*$/）{
$（“#搜索表单”）.tooltip（{title=“You doe good:）”}）；
}
其他的
{
$（“#搜索表单”）。工具提示（{title=“请仅输入数字！”）；
}
});
});
验证

我没有在元素的选项中设置

数据切换：“工具提示”

也没有设置

标题：“SometTitleHere”

，因为。

您是否在js中初始化工具提示？-除非代码中包含以下内容，否则不会显示工具提示：

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

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

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

此处列出，但您的按钮具有类“

btntxt

”，并且您还试图在搜索表单上获取工具提示-但其id为“

search form

”-这两者都不受工具提示声明的影响。最好使用我在文章中给出的方法，这样所有带有工具提示的元素都可以显示它们。如果您忘记了您的类或id与js中列出的不同，则将它们设置为单个类或id的限制性太大。

您是否初始化js中的工具提示？-除非代码中包含以下内容，否则不会显示工具提示：

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

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

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

此处列出，但您的按钮具有类“

btntxt

”，并且您还试图在搜索表单上获取工具提示-但其id为“

search form

”-这两者都不受工具提示声明的影响。最好使用我在文章中给出的方法，这样所有带有工具提示的元素都可以显示它们。如果您忘记了您的类或id与js中列出的类或id不同，那么将它们设置为单个类或id的限制就太大了。

您使用的是表单，因此需要在验证操作时返回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;
            }

您正在使用表单，所以需要在验证操作时返回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;
            }

您的脚本具有以下顺序：

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

您的脚本有以下顺序：

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

您的代码中几乎没有错误

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

代码执行后，上行将初始化工具提示。之后，如果更新了工具提示标题，则需要销毁工具提示并使用新标题重新初始化

var-previous；
//购买按钮JS代码
$（函数（）{
$（“#searchform”）.bind（'submit'，函数（）{
var newTooltip=“”；
var str=$（“#搜索表单”）.val（）；
如果（str.match（/^[0-9]*$/）{
newTooltip=“你做得很好：）”；
}
其他的
{
newTooltip='请仅输入数字！'；
}
$（“#搜索表单”）.attr（'title'，newTooltip.）.tooltip（'fixttitle'）.tooltip（'setContent'）.tooltip（'show'）；
setTimeout（函数（）{
$（“#搜索表单”）。工具提示（“隐藏”）。工具提示（“销毁”）；
}, 1500);
});
});

/*---不使用引导css，因为它会弄乱表单布局，所以我将每个工具提示引用的块复制到我的style.css---*/
验证
您的代码中几乎没有错误
//it should be title: and not title=
 $('#search-form').tooltip({title:"You did good :)"});

代码执行后，上行将初始化工具提示。
之后，如果更新了工具提示标题，则需要销毁工具提示并使用新标题重新初始化

var-previous；
//购买按钮JS代码
$（函数（）{
$（“#searchform”）.bind（'submit'，函数（）{
var newTooltip=“”；
var str=$（“#搜索表单”）.val（）；
如果（str.match（/^[0-9]*$/）{
newTooltip=“你做得很好：）”；
}
其他的
{
newTooltip='请仅输入数字！'；
}
$（“#搜索表单”）.attr（'title'，newTooltip.）.tooltip（'fixttitle'）.tooltip（'setContent'）.tooltip（'show'）；
setTimeout（函数（）{
$（“#搜索表单”）。工具提示（“隐藏”）。工具提示（“销毁”）；
}, 1500);
});
});

/*---不使用引导css，因为它会弄乱表单布局，所以我将每个工具提示引用的块复制到我的style.css---*/
验证
按钮类型为submit，因此正在刷新页面如何？我想我让js代码在执行任何其他操作之前检查输入文本。检查bootstrap.min.js
是否正在加载。data toggle=“tooltip”
正是显示/隐藏工具提示的内容。。在您的情况下，您应该将其添加到按钮中，并将类型从