Question

This is a screenshot of a normal google search

当您转到Google搜索引擎上的麦克风图标时，我正在尝试显示小消息框。我想将其合并到我的引导按钮中。以下是我要在“连接和断开连接”按钮上添加类似消息框的代码。

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-6">
        <br>
          <img style="width:30%" src="icon1.jpg">
        <br>
        <br>


          <button type="button" class="btn btn-success" >
            <a style="color:white;" href= "options.html" >
              Connect
            </a>
          </button>

        </div>

        <div class = "col-12 col-sm-6 col-md-6 ">
          <br>
            <img style="width:30%" class="float-right" src="icon1.jpg" >
          <br>
          <br>
          <br>
          <br>
          <br>
          <div class ="text-right">
          <button type="button" class="btn btn-danger ">
            <a style="color:white;" href= "options.html" >
              Disconnect
            </a>
          </button>
        </div>
        </div>
  </div>
</div>

Answer 1

您要寻找的是工具提示。查看有关引导程序here的引导程序文档。

Answer 2

您可以通过引导程序遵循此代码。使用data-toggle =“ tooltip”到您要悬停的按钮上，标题是工具提示/弹出窗口，然后在页脚中添加以下脚本。有关更多信息，请点击链接https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

无需单击即可弹出按钮的消息

2 个答案: