JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<span class="deque-tooltip-wrapper">


  <button id="demo-button1" class="deque-button" data-deque-tooltip="This particular tooltip is longer than the others,
    and spans several rows. The height is calculated automatically by the
    script and the offset is applied appropriately. It is possible to create
    long tooltips, but it is NOT recommended. The aria-describedby attribute
    does not allow screen reader users to pause in the middle of a tooltip
    and start again where they left off. They have to focus again on
    the element and listen to the whole tooltip from the beginning." aria-describedby="gbe59ab96-bb35-f10a-62b4-182efa747b2c">
    Button 1
  </button>


  <span role="tooltip" id="tooltip-content" class="deque-tooltip deque-hidden" aria-hidden="true" style="left: 100px; bottom: 120%;">
	
	<span aria-label="Tooltip :"></span>

    This particular tooltip is longer than the others,
    and spans several rows. The height is calculated automatically by the
    script and the offset is applied appropriately. It is possible to create
    long tooltips, but it is NOT recommended. The aria-describedby attribute
    does not allow screen reader users to pause in the middle of a tooltip
    and start again where they left off. They have to focus again on
    the element and listen to the whole tooltip from the beginning.
  </span>
</span>

CSS

.deque-tooltip {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    position: absolute;
    background: #fff;
    border: 1px solid rgba(0,0,0,.3);
    min-width: 104px;
    max-width: 250px;
    margin-right: -340px;
    padding: 8px 6px;
    line-height: 16px;
    z-index: 700;
}