CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptooltip
Omarrrio
Omarrrio

Reputation: 1142

Bootstrap tooltip would not show up

Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.

This is my full html page code:

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

I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.

Upvotes: 0

Views: 2924

Answers (4)

Sahil
Sahil

Reputation: 3358

There are few mistakes in your code, 

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

The above line initializes the tooltip once your code excutes. After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.

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>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15519

you have this order to your scripts:

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

Does the tooltip.js require jquery? - if so you may need to invert that order 

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

Upvotes: 1

gavgrif
gavgrif

Reputation: 15519

are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:

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

ok - I just looked at your code - you have : 

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

listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.

Upvotes: 1

Dhaval Patel
Dhaval Patel

Reputation: 7601

You are using form so you need to return true or false on validate action so your code should be like 

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

Upvotes: 1

Related Questions