Tooltip Hover-Status auf font-awesome

Question

Ich versuche Hover auf dem font-awesome-Symbol, um einen Text anzuzeigen, funktioniert jedoch nicht, aber wenn ich auf der Elternklasse schweben zeigt es den Text, den ich versuche zu zeigen.

Ich versuchte .fa:hover .tip-txt, die nicht funktioniert, ignorieren Sie die umgekehrte display:block auf tip.text und Hover-Status. Ich möchte keine jquery für diese einfachen Sachen machen, ich muss einen Weg in css finden, um die richtige Klasse zu nennen.

/* Styles go here */ 
 

 
.tip { 
 
    position: relative; 
 
    float: left; 
 
    left: 20px; 
 
    
 
} 
 

 
.help { 
 
    text-align: right; 
 
    display: block; 
 
} 
 
.tip-txt { 
 
    width: 145px; 
 
    position: absolute; 
 
    display: block; 
 
    background: #333; 
 
    padding: 10px; 
 
    font-size: 12px; 
 
    border-radius: 3px; 
 
    color: #fff; 
 
    transition: .5s ease-in-out; 
 
    box-sizing: border-box; 
 
    text-align: left; 
 
} 
 
.fa { 
 
    font-size: 16px; 
 
    transition: .5s ease-in-out; 
 
} 
 
.help:hover .tip-txt { 
 
    display: none; 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="tip"> 
 
    <span class="help"> 
 
    Help 
 
    <i class="fa fa-question-circle"></i> 
 
    <span class="tip-txt"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    </span> 
 
    </span> 
 
</div>

Answer 1

Hier ist eine schnelle Lösung.

• Changed display:block zu display:none in .tip-txt

• Ersetzte .help:hover .tip-txt mit .fa-question-circle:hover + .tip-txt (die + Zeichen wählt das erste Element mit .tip-txt nach .fa-question-circle)

• Changed display:none zu display:block in .fa-question-circle:hover + .tip-txt

/* Styles go here */ 
 

 
.tip { 
 
    position: relative; 
 
    float: left; 
 
    left: 20px; 
 
    
 
} 
 

 
.help { 
 
    text-align: right; 
 
    display: block; 
 
} 
 
.tip-txt { 
 
    width: 145px; 
 
    position: absolute; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    background: #333; 
 
    padding: 10px; 
 
    font-size: 12px; 
 
    border-radius: 3px; 
 
    color: #fff; 
 
    transition: .5s ease-in-out; 
 
    box-sizing: border-box; 
 
    text-align: left; 
 
    transition: opacity .3s; 
 
} 
 
.fa { 
 
    font-size: 16px; 
 
    transition: .5s ease-in-out; 
 
} 
 
.fa-question-circle:hover + .tip-txt { 
 
    visibility: visible; 
 
    color: red; 
 
    opacity: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="tip"> 
 
    <span class="help"> 
 
    Help 
 
    <i class="fa fa-question-circle"></i> 
 
    <span class="tip-txt"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    </span> 
 
    </span> 
 
</div>

Answer 2

U die CSS wie diese

.fa-question-circle:hover + .tip-txt { 
    display: block; 
    color: green; 
    -webkit-animation: fadeIn 2s; 
    animation: fadeIn 2s; 
} 
@-webkit-keyframes fadeIn { 
    from { opacity: 0; } 
     to { opacity: 1; } 
} 
@keyframes fadeIn { 
    from { opacity: 0; } 
     to { opacity: 1; } 
} 

ändern, weil dies falsch ist bereits

.fa:hover .tip-txt 

Wenn die Spitze-txt direkt im Inneren des Behälters :

.fa:hover > .tip-txt{ display: block; } 

Wenn tip-txt neben (nach Verschließen von Behältern tag) der Behälter:

.fa:hover + .tip-txt { display: block; } 

Wenn die Spitze-txt irgendwo im Inneren des Behälters ist:

.fa:hover .tip-txt { display: block; } 

für ref https://plnkr.co/edit/4eMdRf5dOx0sNIEYD7Ig