Button's message pop up without click

Question

This is a screenshot of a normal google search

I'm trying to get the tiny message box when you go to the mic icon on Google search engine. I want to incorporate that to my bootstrap buttons. Following is the code where i want to add a similar message box on Connect and Disconnect button.

<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

What you're looking for are tooltips. Check out bootstrap's documentation about them here .

Answer 2

You can follow this code with bootstrap. use data-toggle="tooltip" to your button from where you want hover, title is the tooltip/popup and add below script to the footer. For more follow the link 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>