使用工具提示中的字體棒圖標

我想在工具提示中使用字體棒圖標。使用工具提示中的字體棒圖標

<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>

該代碼不正確，但給出了我想要做的事情的想法。任何幫助表示讚賞。提前致謝。

來源

2016-09-22 Aparna

沒有....'title'屬性不能包含HTML –

在哪裏想用這個圖標？在工具提示標籤之前或懸停在文本元素之前 –

@MostafaBaezid懸停圖標。我提出了工具提示，但我想在該工具提示中使用圖標。 – Aparna

它可以幫助你

.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 the 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 over me 
 
    <span class="tooltiptext"><i class="fa fa-bold"></i><i class='fa fa-hourglass'></i></span> 
 
</div>

來源

2016-09-22 15:02:14 Kumar

我不知道你想要什麼實際做的，但也許這是你所期待的。我認爲這會對你有所幫助。 fiddle link我已經附上了你需要的最小Cdn，我在小提琴中使用twitter-bootstrap也是這個代碼。您可以在小提琴得到懸停效果

的jQuery：

HTML：

$(document).ready(function() { 
 
    $('[data-toggle="tooltip"]').tooltip(); 
 

 
    })

<head> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> 
 
    
 
</head> 
 

 
<body> 
 
<div class="container"> 
 
    <h3>Tooltip Icon</h3> 
 

 
    <a href="#"><span class="fa fa-info-circle" data-toggle="tooltip" data-original-title="text-success" ></span></a> 
 

 
    <a href="#"><span class="fa fa-hourglass" data-toggle="tooltip" data-original-title="Level-1" ></span></a> 
 
    <a href="#"><span class="fa fa-hourglass-half" data-toggle="tooltip" data-original-title="Level-2" ></span></a> 
 
    <a href="#"><span class="fa fa-hourglass" data-toggle="tooltip" data-original-title="Level-3" ></span></a> 
 
</div> 
 
</body>

來源

2016-09-22 15:30:15

我想給我一個圖標上的工具提示，我已經完成了。此外，我想在工具提示文本中使用fa圖標，這是我無法做到的。 – Aparna

使用工具提示中的字體棒圖標

回答

相關問題