Question

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

Answer 1

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

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

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

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

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

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

Answer 3

你的脚本有这个订单：

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

Answer 4

您的代码中存在少量错误，

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

Bootstrap工具提示不会显示

4 个答案: