CSS3: der Tooltip Max Breite mit Zeilenumbruch

Versucht, max-width im Falle von text-wrap für tooltip in diesem jsfiddle, aber es gilt die Standard-Breite.

HTML:

<div id="container" style="margin: 167px 135px 0px 0px; height: 400px">
<a class="tooltip" tip="television">content1</a>
<a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a>
</div>

CSS:

.tooltip{
display: inline;
position: relative;
white-space: pre-wrap;       /* css-3 */
margin: 20px 20px 20px 20px; 
height: 30px;  
width: 50px
 }

.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:50px;
max-width:500px;
}

.tooltip:hover:before{
border: solid;
border-color: #8FBC8F transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

wenn der text im tooltip ist das erste Wort gewickelt, die Breite gehen sollten, um einige max-width anstelle der Standard-Breite, so dass es bequem für das Lesen.

diese jsfiddle funktioniert, wenn ich display: inline-table; wie unten

.tooltip:hover:after{
 :
 :
display: inline-table;
}

Aber es funktioniert nur in Chrome und nicht IE -

hast du nicht gesehen die Geige? jsfiddle.net/Seenu/yjYW4, wenn der text im tooltip ist das erste Wort gewickelt, die Breite gehen sollten, um einige max-width anstelle der Standard-Breite, so dass es bequem für das Lesen.

InformationsquelleAutor Srinivas | 2014-01-22

  1. 2

    Verwenden Sie display:inline und max-width und für einige browser bei der Verwendung von word wrap.Es gibt ein gutes tutorial zum erstellen von css3-tooltip erstellen von css3-tooltip.

    Hier finden Sie den code aus diesem tutorial:

    .tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
 max-width: 220px;
}

    InformationsquelleAutor adi

  2. 1

    Bitte ändern Sie Ihre CSS min-width und max-width wie folgt:

    .tooltip:hover:after{
    background: #8FBC8F;
    border-radius: 5px;
    bottom: 26px;
    color: #000;
    content: attr(tip);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width:auto;
    min-width:500px; /* I have changed here */
    max-width:500px;
}

    InformationsquelleAutor KoemsieLy

  3. 1

    Stolperte über das gleiche problem, und nach einigem Gefummel finden folgende Problemumgehung für meinen Fall: Sie haben zu wickeln QuickInfo-Inhalt in einem anderen element, das dem erwarteten max-width für den tooltip in der Breite und Position absolute. Dann wickelte Inhalte verwenden diese als Basis max Breite bei der Verpackung text.

    Bestätigt, dass es funktioniert in der aktuellen öffentlichen DH/Edge/Chrome/FF zu der Zeit des Schreibens

    Codepen: https://codepen.io/jfhs/pen/LzbwgJ

    Code:

    <div class="tooltip">
 <div class="tooltip-content-wrapper">
  <div class="tooltip-content">Long long text</div>
 </div>
</div>

    CSS:

    .tooltip {
  position: relative;
}

.tooltip-content-wrapper {
  position: absolute;
  width: 100px; /* THIS is your max-width for tooltip */
  visibility: hidden;
}

.tooltip:hover .tooltip-content-wrapper {
  visibility: visible;
}

.tooltip-content {
  display: inline-block;
}
    Ja, das funktioniert, aber es hat nichts zu tun mit pseudo-Elementen.

    InformationsquelleAutor jfhs

Schreibe einen Kommentar