Bootstrap 3.0 弹出窗口和工具提示

用来显示弹出窗口的底部按钮。

创建工具提示

工具提示可以用来提供额外的信息或者指导。在Bootstrap 3.0中，可以使用工具提示组件来实现这一功能。首先，我们需要在页面中引入Bootstrap的CSS和JavaScript文件（如果之前已经引入过，则可以忽略这一步）：

html
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/JS/bootstrap.min.JS"></script>

接下来，我们可以使用以下的HTML代码来添加一个带有工具提示的元素：

html
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="这是一个工具提示">Hover Me</button>

在上面的代码中，data-toggle="tooltip"属性指定了元素触发工具提示的行为，data-placement="top"属性指定了工具提示的位置，title="这是一个工具提示"属性指定了工具提示的内容。

然后，我们需要在页面中添加以下的JavaScript代码来初始化工具提示：

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

在上面的代码中，$('[data-toggle="tooltip"]').tooltip();用来初始化所有带有data-toggle="tooltip"属性的元素的工具提示。

示例代码

下面是一个简单的示例代码，演示了如何使用Bootstrap 3.0创建弹出窗口和工具提示：

html
<!DOCTYPE html>
<html>
<head>
  <title>弹出窗口和工具提示示例</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/JS/bootstrap.min.JS"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开弹出窗口</button>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">弹出窗口标题</h4>
      </div>
      <div class="modal-body">
        
<img src="https://img.izhida.com/topic/d52387880e1ea22817a72d3759213819.jpg" alt="Java"><br>Java
弹出窗口内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<br>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="这是一个工具提示">Hover Me</button>
<script src="https://Ajax.Googleapis.com/Ajax/libs/jquery/3.5.1/jquery.min.JS"></script>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip(); 
});
</script>
</body>
</html>

在上面的代码中，通过点击"打开弹出窗口"按钮可以触发弹出窗口的显示，通过将鼠标悬停在"Hover Me"按钮上可以触发工具提示的显示。

通过以上的步骤，我们可以使用Bootstrap 3.0轻松地创建弹出窗口和工具提示，为网页增添更多的交互和功能。