JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<button tooltip-title="Hello Baliga" spiketip-pos="top-right" tooltip-color="yellow">
Hover Me!
</button>

CSS

body{
  padding-top:100px;
  padding-left:100px;
  
}


[tooltip-title] {
  /* base style for the element */
  position: relative;
  cursor: pointer;
}

[tooltip-title]::after { 

  /* Obtaining the content from attribute */
  content: attr(tooltip-title);
  
  /* should be hidden initially */
  opacity: 0;
  
  /* basic styling tooltip */
  background: #222;
  border-radius: 4px;
  color: #fff;
  margin-bottom: 12px;
  padding: 0.5em 1em;
  white-space: nowrap;
  z-index: 10;
  
  /* Positioning tooltip */ 
position: absolute;
/*   bottom: 100%;
  left: 50%; */
  /* Basic effects on tooltip */   
  transition: all 0.2s ease-out 0.2s;
  transform: translate(-50%, 10px);
   transform-origin: top;
      
  }
  
[tooltip-title]:hover::after,[tooltip-title]:hover::before {
  /* Making it visible on hover */
  opacity: 1; 
}

[tooltip-title]:hover::after {
  /* Basic effects on hover */   
  transform: translate(-50%, 0);  
}
[tooltip-color='yellow']:hover::after {
  /* Basic effects on hover */    
  background-color: #ffc107;
}