Bootstrap tooltip is not working on my php file

Question

I have using bootstrap v3.3.7 on for my php project. I have included all minified files. But my tooltip is not working.

 <script type="text/javascript"> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script> <script src="js/bootstrap.min.js" type="text/javascript"></script>

 <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css">

 <div class="container"> <div class="row"> <div class="col-md-9"> <div class="content1"> <div style="padding-left:120px; padding-right:120px"> <form class="form-horizontal" role="form" method="post" id="formID" enctype="multipart/form-data"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">Name of business</label> <div class="col-sm-8"> <input type="text" class="form-control validate[required]" placeholder="Enter name of your business" name="tbname" value="<?=$b_name?>" > </div> </div> <br> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">Area</label> <div class="col-sm-5"> <select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="right" title="specify your nearby location"> <option value="">-- Select Area --</option> <?php $q = mysqli_query($con, "select * from tbl_areas"); while($result = mysqli_fetch_assoc($q)) { echo "<option value='$result[areaid]'>$result[area]</option>"; } ?> </select> </div> </div> <div class="col-sm-7"> <input type="submit" name="btnad" id="btnad" value="Register" class="btn btn-info"/></div> </form> </div> </div> </div> <div class="col-md-3"> <div class="right"> <?php include 'include\\front_right.php'?> </div> </div> </div><!--row end--> </div>

I have used here tooltip for only 'select' tag. but still not working. Please give me solution for this.

Answer 1

Please chekc this demo how it is working

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Tooltip Example</h3> <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html>

Answer 2

Have you included jquery? Here is a working example:

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

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <label for="inputPassword3" class="col-sm-3 control-label">Area</label> <div class="col-sm-5"> <select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="bottom" title="specify your nearby location"> <option value="">-- Select Area --</option> <option value="1">Area 1</option> <option value="2">Area 2</option> </select> </div> </div> </div>

Bootstrap tooltip is not working on my php file

Question

2 answers

solution1
1 2016-09-29 11:25:06

solution2
0 2016-09-29 11:37:23

Bootstrap tooltip is not working on my php file

Question

2 answers

solution1 1 2016-09-29 11:25:06

solution2 0 2016-09-29 11:37:23

solution1
1 2016-09-29 11:25:06

solution2
0 2016-09-29 11:37:23