JSFiddle - React, Tailwind, and code Playground

by anilkamath87

HTML

<label >
    Tooltip 


    <input type="text" />
</label>
<span class="arrow-left"></span>
<span class="tooltip">
       <span>Required</span>
    </span>

CSS

.tooltip {outline:none; }


.tooltip {
    z-index:10;display:none;
    margin-top:-4px;
    max-width:100px; line-height:16px;
}
.tooltip {
    display:inline; position:absolute; color:#111;
    border:1px solid red;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
.tooltip
{
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
     padding:8px; 
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
}


.arrow-left {
  /*
   * In Internet Explorer, The"border-style: dashed" will never be
   * rendered unless "(width * 5) >= border-width" is true.
   * Since "width" is set to "0", the "dashed-border" remains
   * invisible to the user, which renders the border just like how
   * "border-color: transparent" renders.
   */
  border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  /* Use font-size to control the size of the arrow. */
  font-size: 15px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0;
}

.arrow-left {
  border-right-width: 1em;
  border-right-style: solid;
  border-right-color: red;
  right: 0.25px;
}