CSS Tooltipp Pfeil funktioniert nicht

-1

Ich habe versucht, einen Tooltip zu machen. So etwas wie in dem Bild unten, die erscheint, wenn ich auf dem Bild schweben:CSS Tooltipp Pfeil funktioniert nicht

Problem ist der unten Dreieck Pfeil gar nicht kommen. Ich habe es viel gegooglet und bin durch die vorher gestellte stackoverflow Frage gegangen. Aber kein Glück. Ich werde unten setzen Code, könnten Sie bitte lassen Sie mich wissen, wo ich falsch werde:

HTML-Code:

<span class="help-tooltip" tooltip-text="Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit. Donec non diam enim. Quisque leo erat, vulputate id mi et, pharetra vulputate sapien."> 

      <img src="/static/img/help.png"> 
</span>

Unten ist mein CSS-Code:

span[tooltip-text]:hover:after { 
    content: attr(tooltip-text); 
    padding: 8px 8px; 
    color: white; 
    position: absolute; 
    left: -60px; 
    bottom: 120%; 
    width: 275px; 
    height: auto; 
    background: #0679ca; 
    border-radius: 10px; 
} 

.help-tooltip:hover { 
    position: relative; 
}

Quelle

2017-05-22 Shubhangi Garg

Bitte versuchen Sie diese zu erreichen Ihr Ziel,

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
    margin: 50px; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
} 
 

 
.tooltip .tooltiptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: black transparent transparent transparent; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
}

<body style="text-align:center;"> 
 

 
<div class="tooltip">Hover me 
 
<span class="tooltiptext">Tooltip text</span> 
 
</div>

Quelle

2017-05-22 13:11:40 codesayan

CSS Tooltipp Pfeil funktioniert nicht

Antwort

Verwandte Themen