Ich habe ein CSS mit dem ein Tooltip zum Zurück/Weiter Button als CSS eingetragen wird.
Ich vewende:
a[data-tooltip]:before {
position: absolute;
left: 0;
top: -40px;
background-color: #ff0000;
color: #ffffff;
height: 30px;
line-height: 30px;
border-radius: 5px;
padding: 0 15px;
content: attr(data-tooltip);
white-space: nowrap;
display: none;
}
a[data-tooltip] {
position: relative;
}
a[data-tooltip]:after {
position: absolute;
left: 15px;
top: -10px;
border-top: 7px solid #ff0000;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: none;
}
a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {
display: block;
}
Um das mit dem hier aufrufen:
<a href="http://www.t3n.de/" data-tooltip="ABCD 01">ABCD 01</a>
Das funktioniert auch soweit.
Wenn ich dann dies für die Seitennavigation in den Beiträgen verwenden will, kommt es zu einem Problem.
Ich verwende das:
a[data-original-title]:before {
position: absolute;
left: 0;
top: -40px;
background-color: #ff0000;
color: #ffffff;
height: 30px;
line-height: 30px;
border-radius: 5px;
padding: 0 15px;
content: attr(data-original-title);
white-space: nowrap;
display: none;
}
a[data-original-title] {
position: relative;
}
a[data-original-title]:after {
position: absolute;
left: 15px;
top: -10px;
border-top: 7px solid #ff0000;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: none;
}
a[data-original-title]:hover:after, a[data-original-title]:hover:before {
display: block;
}
Um es mit dem hier aufzurufen:
<ul class="pager pagenav">
<li class="previous">
<a class="hasTooltip" title="" aria-label="ABCD ZURÜCK" href="./zurück" rel="prev" data-original-title="ABCD ZURÜCK">
<span class="icon-chevron-left" aria-hidden="true"></span> <span aria-hidden="true">Zurück</span> </a>
</li>
<li class="next">
<a class="hasTooltip" title="" aria-label="ABCD WEITER" href="/weiter" rel="next" data-original-title="ABCD WEITER">
<span aria-hidden="true">Weiter</span> <span class="icon-chevron-right" aria-hidden="true"></span> </a>
</li>
</ul>
Als einzelne Testdatei funktioniert das auch.
Jedoch füge ich das in meinem Template ein so kommt es dazu, dass der Tooltip nicht mit der CSS Formatierung erscheint.
Wo ist hier mein Fehler?
Das Original CSS Verwende ich nicht. Es sollte eigentlich nicht zu Komplikationen kommen.