Verwenden Sie font awesome Symbole in Tooltip

Ich möchte ein Font-awesome Symbol im Tooltip verwenden.Verwenden Sie font awesome Symbole in Tooltip

Der Code ist falsch, aber gibt eine Vorstellung von dem, was ich tun möchte. Jede Hilfe wird geschätzt. Danke im Voraus.

Quelle

2016-09-22 Aparna

Nein .... 'title' Attribute können nicht HTML –

enthalten, wo verwenden Sie wollen Dieses Symbol? vor dem Tooltip Tag oder bei Hover vor Textelement –

@MostafaBaezid auf Hover eines Symbols. Ich habe den Tooltip gemacht, aber ich wollte ein Symbol in diesem Tooltip verwenden. – Aparna

Es könnte Ihnen Ich weiß nicht, was Sie wirklich tun wollen, aber vielleicht suchen Sie diese ein für

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

Quelle

2016-09-22 15:02:14 Kumar

helfen. Ich denke, das wird dir helfen. fiddle link Ich habe die minimalen Cdns angehängt, die ich brauche, benutze Twitter-Bootstrap in Geige und auch diesen Code. Sie können die Hover-Effekt auf Geige bekommen

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>

Quelle

2016-09-22 15:30:15

Ich wollte den Tooltip auf ein Icon geben, was ich gemacht habe. Außerdem wollte ich fa-Symbole im Tooltip-Text verwenden, was ich nicht konnte. – Aparna

Verwenden Sie font awesome Symbole in Tooltip

Antwort

Verwandte Themen