Tratando de aplicar max-width en caso de ajuste de texto para la descripción en esta jsfiddle, pero se aplica el ancho predeterminado.

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;
}

cuando el texto en la descripción está recibiendo la palabra envuelta, la anchura debe ir hasta algunos max anchura de la anchura por defecto de modo que es conveniente para la lectura.

este jsfiddle funciona cuando pongo display: inline-table; como el de abajo,

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

Pero sólo funciona en Chrome y no en IE

  • no has visto el violín? jsfiddle.net/Seenu/yjYW4 cuando el texto en la descripción está recibiendo la palabra envuelta, la anchura debe ir hasta algunos max anchura de la anchura por defecto de modo que es conveniente para la lectura.
InformationsquelleAutor Srinivas | 2014-01-22

3 Comentarios

  1. 2

    Tienes que utilizar display:inline y max-width y para algunos navegador use el ajuste de línea.Hay un buen tutorial para crear css3 descripción crear css3 descripción.

    Aquí un poco de código a partir de que el 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;
    }
  2. 1

    Por favor, cambia tu CSS min-width y max-width, como el de abajo:

    .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;
    }
  3. 1

    Topó con el mismo problema, y después de algunos chanchullos encontrado la siguiente solución para mi caso: usted tiene que ajustar la descripción de contenido en otro elemento, que tendrá su esperado max-width para la descripción de ancho, y posiciona de forma absoluta. Luego se envuelve el contenido va a utilizar esto como base max ancho mientras que el ajuste de texto.

    Comprobado que funciona en la última IE/Edge/Chrome/FF en el momento de escribir

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

    Código:

    <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;
    }
    • Sí, esto funciona, pero no tiene nada que ver con los pseudo elementos.

Dejar respuesta

Please enter your comment!
Please enter your name here