JSFiddle - React, Tailwind, and code Playground

by Yolanda Robles

HTML

<div class="contenedor">
  <button onclick="eventoClick" class="boton">
    click me!
  </button>
  <div class="tooltip">
  </div>
</div>

CSS

.tooltip {
      width: 350px;
      height: 450px;
      border: 3px solid lightgray;
      background: white;
      z-index: 999;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 7px;
      
      /*posicionamiento*/
      position: absolute;  
      left: 350px;
      top: 93px;
      
      margin-left: 30px; /**/
}
    
.tooltip::before {
      content: "";
      position: absolute;
      right: 100%;
      top: 100px;
      width: 0;
      height: 0;
      border-top: 17px solid transparent;
      border-right: 29px solid lightgray;
      border-bottom: 17px solid transparent;
}

.tooltip::after {
      content: "";
      position: absolute;
      right: 100%;
      top: 102px;
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-right: 22px solid white;
      border-bottom: 15px solid transparent;
}

.boton{
  width: 140px;
  text-align: center;
  height: 30px;
  vertical-align: middle;
  z-index: 0;
  /*posicionamiento*/
  position: absolute;
  top: 200px;
  left: 200px;
}

.contenedor{
  position: relative;
  width: 800px;
  height: 800px;
  background-color: lightyellow;
}

JavaScript

$('.tooltip').toggle();
var escondido = true;

$('.boton').click(function() {
		if (escondido){
    	$('.tooltip').show();
      escondido = false;
    }
    else
    {
    	$('.tooltip').toggle();
      escondido = true;
    }
});