Tooltip mit CSS wie genau platzieren?

Diskutiere Tooltip mit CSS wie genau platzieren? im HTML Forum im Bereich Programmierung; Hallo. Ich habe eine Seite gebaut, mit Tooltips. Leider bekomme ich es nicht hin den Tooltip mittig unter den jeweiligen zahlen zu platzieren. Mit...
Neues Thema erstellen Antworten
  • Tooltip mit CSS wie genau platzieren? Beitrag #1
F
FTTDD78
Member
Beiträge
15
Punkte Reaktionen
0
Hallo.
Ich habe eine Seite gebaut, mit Tooltips.
Leider bekomme ich es nicht hin den Tooltip mittig unter den jeweiligen zahlen zu platzieren.
Mit einem Pfeil auf die Zahl wäre es noch schöner.
Die Tabellen elemente sollen die jetzige größe behalten.

Hat jemand einen Rat für mich?

CSS: 
<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-width:0px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0lax{text-align:center;vertical-align:center;cursor: help}
.tg .tg-voll{position: static;border-style:solid;border-width:1px;text-align:center;vertical-align:center;cursor: help}
.tg .tg-links{border-left-style:solid;border-top-style:none;border-right-style:none;border-bottom-style:none;border-width:1px;text-align:center;vertical-align:center;cursor: help}
.tg .tg-links1{border-left-style:solid;border-top-style:none;border-right-style:none;border-bottom-style:none;border-width:1px;text-align:center;vertical-align:center}
.tg .tg-oben{border-left-style:none;border-top-style:solid;border-right-style:none;border-bottom-style:none;border-width:1px;text-align:center;vertical-align:center;font-family:Arial, sans-serif;font-size:18px;
  font-weight:normal;cursor: help}
.tg .tg-none{padding:0px 1px;border-left-style:none;border-top-style:none;border-right-style:none;border-bottom-style:none;border-width:0px;text-align:center;vertical-align:center;font-family:Arial, sans-serif;font-size:18px;
  font-weight:normal;cursor: help}

.tool {
 display: inline-table;
 color: #000000;
}

.tip {
 display: None;
}

span.tool:hover span.tip {
 display: Inline-Block;
 display: Table-Caption;
 position: absolute;
 width: 120px;
 z-index: 10000;
 background-color: rgb(0, 0, 0);
 box-shadow: 0px 0px 0px rgb(255, 255, 255);
 padding: 4px;
 margin: 15px;
 border: solid 1px #c32e04;
 border-radius: 0.5em;
 font-family: Arial, Sans-Serif;
 font-size: 14px;
 color: #FFFFFF;
 white-space: pre;
}
.span.tool::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
</style>
HTML: 
<table class="tg" border="5" cellpadding="0" cellspacing="2" align="center">
<thead>
  <tr>
    <th class="tg-0lax" colspan="20"><p align="center"><b><u><font size="+3">Übersicht</font></u></b></p></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0lax" colspan="20"></td>
  </tr>
  <tr>
    <td class="tg-voll" border-width=2 colspan="5"><span class="tool">56<span class="tip">Bereich 1</span></span></td>
    <td class="tg-voll" colspan="5"><span class="tool">61<span class="tip">Bereich 2</span></span></td>
    <td class="tg-voll" colspan="5"><span class="tool">66<span class="tip">Bereich 3</span></span></td>
    <td class="tg-voll" colspan="5"><span class="tool">71<span class="tip">Bereich 4</span></span></td>
  </tr>
  <tr>
    <td width="15" class="tg-links"><span class="tool">1<span class="tip">X=56 <br>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">3<span class="tip">X=58 <br>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">5<span class="tip">X=60 <br>E Palette</span></span></td>
    <td width="15" class="tg-links"><span class="tool">1<span class="tip">X=61 <br>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">3<span class="tip">X=63 <br>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">5<span class="tip">X=65 <br>E Palette</span></span></td>
    <td width="15" class="tg-links"><span class="tool">1<span class="tip">X=66 <br>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">3<span class="tip">X=68 <bR>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">5<span class="tip">X=70 <bR>E Palette</span></span></td>
    <td width="15" class="tg-links"><span class="tool">1<span class="tip">X=71 <bR>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">3<span class="tip">X=73 <bR>E Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">5<span class="tip">X=75 <bR>E Palette</span></span></td>
  </tr>
  <tr>
    <td class="tg-links1"></td>
    <td width="15" class="tg-0lax"><span class="tool">2<span class="tip">X=57 <bR>I Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">4<span class="tip">X=59 <bR>I Palette</span></span></td>
    <td></td>
    <td class="tg-links1"></td>
    <td width="15" class="tg-0lax"><span class="tool">2<span class="tip">X=62 <bR>I Palette</span></span></td>
    <td></td>
    <td width="15" class="tg-0lax"><span class="tool">4<span class="tip">X=64 <bR>I Palette</span></span></td>
    <td></td>
    <td class="tg-links1"></td>
    <td width="15" class="tg-0lax"><span class="tool">2<span class="tip">X=67 <bR>I Palette</span></span></td>
    <td class="tg-0lax"></td>
    <td width="15" class="tg-0lax"><span class="tool">4<span class="tip">X=69 <bR>I Palette</span></span></td>
    <td class="tg-0lax"></td>
    <td class="tg-links1"></td>
    <td width="15" class="tg-0lax"><span class="tool">2<span class="tip">X=72 <bR>I Palette</span></span></td>
    <td class="tg-0lax"></td>
    <td width="15" class="tg-0lax"><span class="tool">4<span class="tip">X=74 <bR>I Palette</span></span></td>
    <td class="tg-0lax"></td>
  </tr>
</tbody>
</table>
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Die Zentrierung geht relativ einfach, indem man mit transform:translate den Tooltipp um die halbe Breite nach links verschiebt:
Code: 
span.tool:hover span.tip {
    display: Inline-Block;
    display: Table-Caption;
    position: absolute;
    width: 120px;
    z-index: 10000;
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 0px rgb(255 255 255);
    padding: 4px;
    /* margin: 15px; */
    border: solid 1px #c32e04;
    border-radius: 0.5em;
    font-family: Arial, Sans-Serif;
    font-size: 14px;
    color: #FFFFFF;
    white-space: pre;
    transform: translateX(-60px);
}
Das Margin habe ich deaktiviert, damit der Tooltip direkt unter die Ziffer gelangt. Du kannst ihn wieder aktivieren, musst das dann aber beim translate berücksichtigen.

Wie man mit CSS Dreiecke erzeugt, kannst Du z. B. hier nachlesen:
https://css-tricks.com/snippets/css/css-triangle/
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #3
F
FTTDD78
Member
Beiträge
15
Punkte Reaktionen
0
Super. Danke.
Und nun wäre es schön wenn ich noch eine Pfeilspitze nach oben daran bekommen könnte.
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Dafür war mein Hinweis auf CSS-Tricks: Pfeilspitze gleich Dreieck. Versuche es.
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #5
F
FTTDD78
Member
Beiträge
15
Punkte Reaktionen
0
Ich habe es probiert.
Habe es mal wie in diesem beispiel versucht, aber leider steht der Tooltiptext dann als normaler Text in der Tabelle und ich habe gar keinen Tooltip mehr.

Code: 
<!DOCTYPE html>
<html>
<style>
.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: absolute;
    z-index: 1;
    top: 250%;
    left: 50%;
    margin-left: -60px;
}

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

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>

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

</body>
</html>

Ich komme einfach nicht weiter.
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #6
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Das ist schon ein wenig knifflig, vor allen wenn man den Tooltip und den Pfeil genau mittig platzieren will. Ich habe mich auch damit beschäftigt und dies ist das Ergebnis:
Code: 
        /* Wir hängen den Pfeil am span.tool auf weil er dort
        leichter zu positionieren ist: */
        span.tool:hover::before {
            content: '';
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-bottom: 5px solid #c32e04;
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-5px);
            z-index: 11000;
        }

        /* .span.tool::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }*/
Außerdem musste ich bei den Tabellenzellen overflow:visible und position:relative hinzu fügen:
Code: 
.tg td {
    border-color: black;
    border-width: 0px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
    position: relative;
    overflow: visible;
}
Damit funktioniert es für die unteren Zellen wo nur ein Ziffer darin steht. Oben noch nicht, das muss ich noch untersuchen.
 
Zuletzt bearbeitet:
  • Tooltip mit CSS wie genau platzieren? Beitrag #7
F
FTTDD78
Member
Beiträge
15
Punkte Reaktionen
0
Danke.
Das wars.
Ich musste jetzt nur noch bei
.tg .tg-voll und den anderen Tabellenelementen
overflow:visible und position:relative hinzufügen.

Super Danke an alle.
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #8
F
FTTDD78
Member
Beiträge
15
Punkte Reaktionen
0
Hallo.
Kann ich irgendwie, wenn ich class="tool" oder class="tip" im Span aufrufe dann irgendwie die Breite width:250px; und
transform: translateX(-125px); individuell angeben?
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #9
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Möchtest Du die Breite des Tooltip individuell variieren und es soll trotzdem zentriert bleiben?
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #11
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Dann würde ich vorschlagen, dass Du Gruppen einrichtest, z. B. small, medium, wide als Klassen und damit die Breite fest legst. Zusätzlich zu tool und tip.
Da der Pfeil an .tool hängt, sollte er ohne weitere Maßnahmen zentriert bleiben.
Und für die Positionierung Prozentwerte verwenden:
Code: 
span.tool:hover span.tip {
    display: Inline-Block;
    display: Table-Caption;
    position: absolute;
    width: 120px;
    z-index: 10000;
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 0px rgb(255 255 255);
    padding: 4px;
    /* margin: 15px; */
    border: solid 1px #c32e04;
    border-radius: 0.5em;
    font-family: Arial, Sans-Serif;
    font-size: 14px;
    color: #FFFFFF;
    white-space: pre;
    /* Hier eine relative Breite verwenden, möglicher Weise muss border
    noch berücksichtigt werden: */
    transform: translateX(-50%);
}
Insofern war der Code in meinem früheren Posting nicht optimal.
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #12
F
FTTDD78
Member
Beiträge
15
Punkte Reaktionen
0
Ok. das mit den -50% ist gut.
Sorry das ich frage, aber wie richte ich die gruppen ein?
 
  • Tooltip mit CSS wie genau platzieren? Beitrag #13
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Ich meinte damit nur, dass Du nicht für jeden einzelnen Tooltip die Breite fest legst sondern drei Varianten (z. B., können auch mehr sein) definierst und den Tooltips eine entspr. Klasse hinzu fügst:
Code: 
                <td class="tg-voll" border-width=2 colspan="5"><span class="tool">56<span class="tip small">Bereich
                            1</span></span></td>
                <td class="tg-voll" colspan="5"><span class="tool">61<span class="tip">Bereich 2</span></span>
                </td>
                <td class="tg-voll" colspan="5"><span class="tool">66<span class="tip">Bereich 3</span></span></td>
                <td class="tg-voll" colspan="5"><span class="tool">71<span class="tip wide">Bereich 4</span></span></td>
Das "medium" braucht man eigentlich nicht, weil man es als Default ansehen kann.
Dann die Breite über das CSS fest legen:
Code: 
        span.tool:hover .tip.small {
            width: 80px;
        }

        span.tool:hover .tip.wide {
            width: 150px;
        }
 
Thema:

Tooltip mit CSS wie genau platzieren?

Oben Unten