JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<label>Toppings: <span class="infoTip">? <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto repudiandae aut obcaecati provident laboriosam quas doloribus aliquid molestias eos eveniet minus placeat ex corrupti in saepe impedit numquam illo quo.</span></span></label><br/>

<label>Amount Of Cheese <span class="infoTip">? <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto repudiandae aut obcaecati provident laboriosam quas doloribus aliquid molestias eos eveniet minus placeat ex corrupti in saepe impedit numquam illo quo.</span></span></label><br/>

<label>Sauce Content: <span class="infoTip">? <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto repudiandae aut obcaecati provident laboriosam quas doloribus aliquid molestias eos eveniet minus placeat ex corrupti in saepe impedit numquam illo quo.</span></span></label><br/>

<label>Special Instructions for making: <span class="infoTip">? <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto repudiandae aut obcaecati provident laboriosam quas doloribus aliquid molestias eos eveniet minus placeat ex corrupti in saepe impedit numquam illo quo.</span></span></label><br/>

CSS

infoTipParent {
    display:inline-block;
    position:relative;
}

.infoTip {
    background:#6BB9F0;
    color:white;
    font-weight:bolder;
    width:15px;
    height:15px;
    display:inline-block;
    line-height:15px;
    text-align: center;
    font-size:13px;
    border-radius:50%;
  /*   position:relative; */
    
}
.infoBox {
    border:1px solid black;
    padding:5px;
    width:100%;
    min-width:350px;
    color:red;
    background:white;
    display:block;
    position:absolute;
    top:102%;
    left:0px;  
    z-index:50;
}

JavaScript

$.fn.infoTip = function() {
    $(this).find('span').addClass('infoBox').fadeOut(0);
    this.parent().addClass('infoTipParent');
    
    $(this).hover(function(){
        $(this).find('span').fadeIn(300);
    }, function(){
        $(this).find('span').stop(true, false).fadeOut(300);
   });
};
$( ".infoTip" ).infoTip();