CSS-only TOOLTIPs

by Plippie Plop

HTML

<div class="container">
<div><p>Standard no tooltip here</p></div>
  
  <div data-utils="tooltip" data-original-title="Hi, I'm a tooltip. Pretty easy uh ? ;)" data-placement="right"><p>  
  Div with standard tooltip. on the righty.</p>
   </div>


  <div data-utils="tooltip" data-original-title="Hi, I'm a tooltip. Pretty easy uh ? ;)" data-placement="left" data-tooltip-persistent><p>Tooltip on left</p></div>
    
  <div data-utils="tooltip" data-original-title="Hi, I'm a tooltip. Pretty easy uh ? ;)" data-placement="top" data-tooltip-persistent><p>Tooltip on top</p></div>
    <div data-utils="tooltip" data-original-title="Hi, I'm a tooltip. Pretty easy uh ? ;)" data-placement="bottom" data-tooltip-persistent><p>Tooltip on bottom</p></div>
    
  

    
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

.container {
  margin: 0 10vw;
  display: flex;
  flex-direction: column;
  font-family: Roboto;

}

.container>div {
  flex: 1 1 auto;
  border: 1px solid grey;
  margin: 1rem;
}

p {
  padding: 0.5rem 1rem;
}

[data-utils="tooltip"] {
  position: relative;
}

[data-utils="tooltip"]:before {
  /* needed - do not touch */
  content: attr(data-original-title);
  position: absolute;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: .3s opacity;
  font-size: 0.6rem;
  color: #fff;
  background-color: rgb(40, 40, 40);
  max-width: 10rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
  pointer-events: none;
  min-width:5rem;


}

[data-utils="tooltip"][data-placement="right"]:before {
  left: calc(1rem + 100%);
  bottom: 50%;
  transform: translateY(50%);
}

[data-utils="tooltip"][data-placement="left"]:before {
  right: calc(1rem + 100%);
  bottom: 50%;
  transform: translateY(50%);
}

[data-utils="tooltip"][data-placement="top"]:before {
  bottom: calc(0.5rem + 100%);
  right: 50%;
  transform: translateX(50%);
}

[data-utils="tooltip"][data-placement="bottom"]:before {
  top: calc(0.5rem + 100%);
  right: 50%;
  transform: translateX(50%);
}

[data-utils="tooltip"]:hover:before,
[data-utils="tooltip"]:hover:after {
  opacity: 1;
  visibility: visible;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}