JSFiddle - React, Tailwind, and code Playground

by anilkamath87

HTML

<label >
    Tooltip 

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

CSS

.tooltip { }

.tooltip-popup{
     z-index:10;
    display:inline;
    outline:none;
    margin-left:60px;
    position:absolute;
    width:120px;
}
.tooltip {
    max-width:100px; line-height:16px;
}
.tooltip {
     color:#111;
    border:1px solid red;}

    
/*CSS3 extras*/
.tooltip
{
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
     padding:6px; 
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
    margin-left: -4px;
        color:red;
}


.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;
       z-index:10;
}

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