JSFiddle - React, Tailwind, and code Playground

by Kushal Jayswal

HTML

<div class="btn-group form-group">
			            <div class="form-group__text select">
			                <select id="language" aria-label="Select your language" name="language" class="required-questions">
			                    
			                    <option value="ar_SA" lang="ar_SA">العربية&lrm;
			                    </option>
			                    
			                    <option value="zh_CN" lang="zh_CN">中文(简体)&lrm;
			                    </option>
			                    
			                    <option value="zh_TW" lang="zh_TW">中文(繁體)&lrm;
			                    </option>
			                    
			                    <option value="en_US" lang="en_US" selected="true">English&lrm;
			                    </option>
			                    
			                    <option value="fr_FR" lang="fr_FR">Français&lrm;
			                    </option>
			                    
			                    <option value="de_DE" lang="de_DE">Deutsch&lrm;
			                    </option>
			                    
			                    <option value="ja_JP" lang="ja_JP">日本語&lrm;
			                    </option>
			                    
			                    <option value="pl_PL" lang="pl_PL">Polski&lrm;
			                    </option>
			                    
			                    <option value="pt_BR" lang="pt_BR">Português&lrm;
			                    </option>
			                    
			                    <option value="ru_RU" lang="ru_RU">Pусский&lrm;
			                    </option>
			                    
			                    <option value="es_ES" lang="es_ES">Español&lrm;
			                    </option>
			                    
			                </select>
			                <div class="required-block">
                                <span class="icon-help-alt" title="Your profile language (can be different from course language)">click</span>
                            </div>
			            </div>
			        </div>

CSS

#language + .required-block {
    webkit-transform: none;
    transform: none;
    font-size: 15px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 10px;
}

JavaScript

var tooltipRef = $('.required-block > .icon-help-alt'),
		toolTipTitle = tooltipRef.attr('title');

tooltipNode.on('click', function(){
	var parentNode = $(this).parents('.form-group'),
  		hasTooltip = $('tooltip-container'),
  		$newNode = $('<div class="tooltip-container"><span class="tooltip">' + toolTipTitle + '</span></div>');
      
      if(!hasTooltip.length){
      	parentNode.after($newNode);
			}
});