JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class="content content_small" data-tooltip="some text">some text</div>
<div class="content content_medium" data-tooltip="some text">some text</div>
<div class="content content_large" data-tooltip="some larger text">some larger text</div>

CSS

[data-tooltip] {
  position: relative;
}
/*[data-tooltip]:hover::before {
  display: block;
}*/
[data-tooltip]::before {
  /*display: none;*/
  content: attr(data-tooltip);
  z-index: 1; background: white;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  
    /* the main thing */
    padding: 10px;
    width: calc(100% + 2 * 10px);
    box-sizing: border-box;
    max-width: 6em;
    white-space: pre-wrap;
    
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 #ccc;
}
.content {
  background: #eee;
  display: inline-block;
  white-space: pre;
  margin-left: 50px;
}
.content_small {
  margin-top: 100px;
}
.content_medium {
  padding-right: 1em; /* to emulate cells wider than the content */
}