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

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

unity3d - Rotate an object to face an opposite direction -

javascript - Why jQuery Select box change event is now working? -