html - Using font awesome icons inside tooltip -
i want use font-awesome icon in tooltip.
<i class="fa fa-info-circle text-success" title="<i class='fa fa-hourglass'></i>: level-1. <i class="fa fa-hourglass-half"> : level-2. <i class='fa fa-hourglass'></i> : level-3."></i>
the code incorrect gives idea of want do. appreciated. in advance.
it might you
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* position tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="tooltip">hover on me <span class="tooltiptext"><i class="fa fa-bold"></i><i class='fa fa-hourglass'></i></span> </div>
Comments
Post a Comment