CSS tooltip abgeschnitten erhalten
Ich habe ein CSS-tooltip, das abgeschnitten ist, wenn das betreffende Element ist zu nah an den Rand des Inhaltsbereichs an. Siehe den Link auf der Unterseite von diesem post: http://blog.betbright.com/top-stories/manchester-united-v-club-brugge-betting-preview/
Hier ist der code, den ich verwende für die tooltip:
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #00A1E0;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltip span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 100%;
margin-left: -76px;
z-index: 999;
}
Lösungen, die Sie empfehlen können, um zu stoppen tooltip abgeschnitten würde geschätzt.
Dank,
Paul
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie die
overflow
Grundstück, auf Ihre.entry-content
Klassevisible
statthidden
. Ihre aktuelle Einstellung verbirgt sich alles, dass passt nicht in dasdiv
. Seit Ihrem tooltip angezeigt wäre, die zum Teil außerhalb Ihrer.entry-content div
, ein Teil ist cut, es sei denn, Sie ändern dieoverflow
Eigenschaft. Also, dein Fehler ist nicht im tooltip, es ist in einem übergeordneten element.overflow: auto
, während Ihr tooltip richtig angezeigt werden.