JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

Some <br/>
    dummy <br/>
    text <br/>
    so <br/>
    that <br/>
    scrollbars <br/>
    appear. <br/>
     <br/> <br/>

    <div>
      <span data-tooltip1="Can you read this long text?">Hover for fixed positioned tooltip</span>
    </div>

    <br/>

    <div>
      <span data-tooltip2="Can you read this long text?">Hover for absolute positioned tooltip</span>
    </div>

     <br/> <br/>
    Some <br/>
    dummy <br/>
    text <br/>
    so <br/>
    that <br/>
    scrollbars <br/>
    appear. <br/>

CSS

[data-tooltip1]:hover::before {
  content: attr(data-tooltip1);
  left:auto;
  position: fixed;
  margin-top: -1.5rem;
  background: lightgray;
  border: 1px solid black;
}


[data-tooltip2]:hover::before {
  content: attr(data-tooltip2);
  left:auto;
  position: absolute;
  background: lightgray;
  border: 1px solid black;
  top: 0px;
}

span{
  display: block;
  font-weight: bold;
  margin: 3px;
  padding: 10px;
  border: 1px solid blue;
  transition: all .2s ease;
}

div{
  overflow: hidden;
  position: relative;
  background: #eeeeee;
  background-clip: content-box;
}