<div>
 
    <button  class="tooltip" data-tooltip="I am using data-tooltip and CSS">Data Text</button>

    <div class="tooltip-ex">
      <button class="tooltip-btn" >Hover over me!</button>
      <section class="tooltip-ex-text">
        <span style="color: greenyellow;">Using the span tag and CSS.</span>
      </section>  
    </div>


    <div class="tooltip-ex">
      <span style="color: black !important;">Please hover over this element</span>
      <section class="tooltip-ex-text">
        <span style="color: white;">Using the span tag.</span>
      </section>  
    </div>

</div>

body{
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 10% auto;
}

div{
  display: grid;
  grid-template-columns:3fr 2fr 2fr;
  text-align:center;
  
}

button{
  width: 100px;
  height: 100px;
  border:none;
}

button:hover{
  background-color: grey;
}



#btn2{
  background: green;
}

.tooltip{
   
    position: relative;
    background: egg;
    padding: 15px 12px;
    font-size: 20px;
    cursor: help;
}

.tooltip::before, .tooltip::after{
    position: absolute;
    left: 50%;
    opacity: 0;
    transition: all ease 0.3s;
}

.tooltip::before{
    content: " ";
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: blue transparent transparent transparent;
    top: -20px;
    margin-left: -8px;

}

.tooltip::after{
    content: attr(data-tooltip);
    background: black;
    top: -20px;
    transform: translateY(-100%);
    font-size: 14px;
    margin-left: -150px;
    width: 300px;
    border-radius: 10px;
    color: #eee;
    padding: 14px;
  
}

/* Hover */

.tooltip:hover::before, .tooltip:hover::after{
    opacity: 1;
    display:block;
}

/* =========#2========== */
.tooltip-btn { 
display: block;
 
}

.tooltip-btn .tooltip-btn-text { 
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
  background-color: #8512d5;
  color: white;
  text-align: center;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
  width: 8em;
  z-index: 1;
}

.tooltip-btn:hover .tooltip-btn-text { 
 visibility: visible;
}
 

/*============#3===============*/

.tooltip-ex { 
 position: relative; 
 display: inline-block;
}

/* This is for the text inside the bubble*/
.tooltip-ex .tooltip-ex-text { 
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
  background-color: #8512d5;
  text-align: center;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
  width: 8em;
  z-index: 1;
}

.tooltip-ex:hover .tooltip-ex-text { 
 visibility: visible;
}