Cómo hacer que la información flotante de css pura (intervalo absolutamente posicionado) cambie el tamaño dinámicamente para acomodar el texto

Question

Recientemente tuve una idea para usar la pseudo-clase CSS :hover para mostrar una información sobre herramientas con estilo cuando el mouse está sobre un enlace.

El código básico para el enlace es así:

.hasTooltip { 
 
    position:relative; 
 
} 
 
.hasTooltip span { 
 
    display:none; 
 
} 
 

 
.hasTooltip:hover span { 
 
    display:block; 
 
    background-color:black; 
 
    border-radius:5px; 
 
    color:white; 
 
    box-shadow:1px 1px 3px gray; 
 
    position:absolute; 
 
    padding:5px; 
 
    top:1.3em; 
 
    left:0px; 
 
    max-width:200px; /* I don't want the width to be too large... */ 
 
}

<a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a>

The result is exactly what I want, pero con un problema molesto: el lapso no se expande para incluir texto, y si no lo hago especifica un ancho, el texto está aplastado.

Hice algunas búsquedas en Google, encontré un par de ejemplos de trabajos que la gente había hecho (this example es espeluznantemente similar a lo que he obtenido), pero nadie parece haber abordado el problema de ancho span que estoy teniendo.

Answer 1

Sé que esta respuesta es muy tarde, pero parece que la clave para su problema sería utilizar:

white-space: nowrap; 

interior de su palmo, y deshacerse de cualquier tipo de ancho definición. Por supuesto, el inconveniente de esto será que la información sobre herramientas solo podrá admitir una sola línea. Si quieres una solución multilínea, lo más probable es que tengas que usar javascript.

Aquí es un ejemplo de este método: http://jsbin.com/oxamez/1/edit

Una ventaja añadida es que esto funciona todo el camino a IE7. Si no necesita soportar IE7, le sugiero que copie el span, e img styles en a: before, y: after para .tooltip. Luego puede llenar el texto usando el atributo data- *.

Answer 2

No creo que haya una solución perfecta para este problema con CSS puro. El primer problema es que cuando coloca el span dentro de la etiqueta a, el span solo desea expandirse hasta el ancho del enlace. Si coloca el span después del a, es posible acercarse a lo que está tratando de hacer, pero deberá configurar el margin-top: 1.3em y luego deberá establecer un margen negativo para deslizar la información sobre herramientas que queda. Sin embargo, va a ser una configuración fija, por lo que no se ubicará exactamente al inicio de cada enlace.

Arreglé una solución jQuery que establece left dinámicamente (y un pequeño efecto de fade para una buena medida).

Demostración: http://jsfiddle.net/wdm954/9jaZL/7/

$('.hasTooltip').hover(function() { 
    var offset = $(this).offset(); 
    $(this).next('span').fadeIn(200).addClass('showTooltip'); 
    $(this).next('span').css('left', offset.left + 'px'); 
}, function() { 
    $(this).next('span').fadeOut(200); 
}); 

Answer 3

A pesar de que esta pregunta es un poco mayor ya, sugeriría el siguiente compromiso:
sólo tiene que utilizar max-width: 200px; y ancho mínimo: 300%; más o menos,
mientras que el ancho mínimo podría resultar más alto que el ancho máximo.
Solo descárguelo.
De esta manera no podría tener información sobre herramientas completamente líquida, pero el ancho estaría en una especie de correlación con el ancho del elemento de enlace que lo contiene.
En términos de agradabilidad óptica, este enfoque podría ser valioso.

---

edición:
Bueno, tengo que admitir que es absurdo lo que escribí. Cuando el ancho mínimo puede ser mayor que el ancho máximo, no tiene sentido. Así que solo poniendo el min-ancho en porcentaje lograría lo que traté de sugerir. Perdón por eso.

Answer 4

Estas sugerencias de herramientas también se pueden integrar fácilmente en un tema de impresión de palabras. Simplemente copie el CSS en su estilo. El archivo CSS y al crear sus publicaciones, solo tome la ayuda del código HTML y cree sus propias sugerencias de herramientas. El descanso es todo estilo, que puede modificarse de acuerdo con su propia elección. También puede usar imágenes dentro de los cuadros de información sobre herramientas.

http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

Answer 5

Encontré esto y me funcionó. Es una buena solución cuando se tiene una gran cantidad de elementos y plugins jQuery en la misma página y no se puede trabajar con

<a href="#">Text <span>Tooltip</span></a> 

Ver solución puro CSS: JS BIN

crédito a trezy.com