Question

我在我的php项目中使用了bootstrap v3.3.7。我已经包含了所有缩小的文件。但我的工具提示无效。

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

我在这里只使用了工具提示'select'标签。但仍然没有工作。请给我解决方案。

Answer 1

请知道这个演示如何运作

＆＃13;

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

＆＃13;

Answer 2

你是否包含了jquery？这是一个有效的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap工具提示无法在我的php文件上运行

2 个答案: