son - span html para que sirve
¿Cómo cambiar el estilo del atributo de título dentro de una etiqueta de anclaje? (11)
No puede diseñar un atributo de title real
El navegador define la forma en que se muestra el texto en el atributo del title y varía de un navegador a otro. Sin embargo, puedes crear algo muy similar usando otros atributos.
Puede hacer una pseudo-información sobre herramientas con CSS y un atributo personalizado (por ejemplo data-title )
Para esto, usaría un atributo de data-title . data-* atributos data-* son un método para almacenar datos personalizados en elementos DOM / HTML. Hay múltiples formas de acceder a ellos . Es importante destacar que pueden ser seleccionados por CSS.
Dado que puede usar CSS para seleccionar elementos con atributos de data-title , puede usar CSS para crear :after (o :before ) que contenga el valor del atributo usando attr() .
Ejemplos de información sobre herramientas con estilo
Más grande y con un color de fondo diferente (por solicitud de la pregunta):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip
Estilo más elaborado (adaptado de esta publicación de blog ):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
position: absolute;
bottom: -1.6em;
left: 100%;
padding: 4px 4px 4px 8px;
color: #222;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
opacity: 0;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip
Problemas conocidos
A diferencia de una información sobre herramientas del title real, la información sobre herramientas producida por el CSS anterior no está, necesariamente, garantizado que sea visible en la página (es decir, podría estar fuera del área visible). Por otro lado, está garantizado que está dentro de la ventana actual, que no es el caso para una información sobre herramientas real.
Del código en la publicación de blog vinculada anteriormente (que vi por primera vez en una respuesta aquí que lo plagió), me pareció obvio usar un atributo data-* lugar del atributo title . También se sugirió hacerlo en un comentario de snostorm sobre esa respuesta (ahora eliminada).
Ejemplo:
<a href="example.com" title="My site"> Link </a>
¿Cómo cambio el atributo "título"? Por defecto, solo tiene fondo amarillo y letra pequeña. Me gustaría hacerlo más grande y cambiar el color de fondo.
¿Hay alguna forma de CSS para darle estilo al atributo del título?
Aquí hay un ejemplo de cómo hacerlo:
a.tip {
border-bottom: 1px dashed;
text-decoration: none
}
a.tip:hover {
cursor: help;
position: relative
}
a.tip span {
display: none
}
a.tip:hover span {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
left: 0px;
margin: 10px;
width: 250px;
position: absolute;
top: 10px;
text-decoration: none
}
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>
CSS no puede cambiar la apariencia de la información sobre herramientas. Es dependiente del navegador / sistema operativo. Si desea algo diferente, deberá usar Javascript para generar el marcado cuando pase el puntero sobre el elemento en lugar de la información sobre herramientas predeterminada.
He encontrado la respuesta aquí: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
mi propio código es el siguiente, he cambiado el nombre del atributo, si mantienes el nombre del título para el atributo que terminas teniendo dos ventanas emergentes para el mismo texto, otro cambio es que mi texto al pasar el mouse se muestra debajo del texto expuesto.
css
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(glose);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
html
<a class="tags" glose="Text shown on hovering">Exposed text</a>
La información sobre herramientas nativa no se puede diseñar.
Dicho esto, puede usar alguna biblioteca que muestre los estilos de capas flotantes cuando el elemento está siendo desplazado (en lugar de la información sobre herramientas nativa, y suprímalo) que requiera pocas o ninguna modificación de código ...
No puede aplicar estilo a la información sobre herramientas predeterminada del navegador. Pero puede usar javascript para crear sus propias sugerencias de herramientas HTML.
Parece que de hecho hay una solución pura de CSS, que requiere solo la expresión css attr , el contenido generado y los selectores de atributos (lo que sugiere que funciona tan atrás como IE8):
a[title]:hover:after {
content: attr(title);
position: absolute;
}
Fuente: https://jsfiddle.net/z42r2vv0/2/
actualización con entrada de @ViROscar: tenga en cuenta que no es necesario usar ningún atributo específico, aunque utilicé el atributo "título" en el ejemplo anterior; en realidad, mi recomendación sería usar el atributo "alt", ya que existe la posibilidad de que el contenido sea accesible para los usuarios que no pueden beneficiarse de CSS.
actualizar nuevamente No cambio el código porque el atributo "título" básicamente se ha convertido en el atributo "información sobre herramientas", y probablemente no sea una buena idea esconder texto importante dentro de un campo al que solo se puede acceder al pasar el mouse, pero si interesado en hacer accesible este texto, el atributo "aria-label" parece ser el mejor lugar para ello: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
Pensé que publicaría mi solución de JavaScript de 20 líneas aquí. No es perfecto, pero puede ser útil para algunos dependiendo de lo que necesite de su información sobre herramientas.
Cuándo usarlo
- Estiliza automáticamente la información sobre herramientas para todos los elementos HTML con un atributo
TITLEdefinido (esto incluye elementos añadidos dinámicamente al documento en el futuro) - No se requieren cambios de Javascript / HTML o hacks para cada información sobre herramientas (solo el atributo
TITLE, semánticamente claro) - Muy ligero (agrega alrededor de 300 bytes con gzip y minificado)
- Solo quieres una información sobre herramientas estilo básica
Cuándo NO usar
- Requiere jQuery, entonces no lo use si no usa jQuery
- Soporte incorrecto para elementos anidados que tienen información sobre herramientas
- Necesita más de una información sobre herramientas en la pantalla al mismo tiempo
- Necesitas que la información sobre herramientas desaparezca después de un tiempo
El código
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id=''" + ID + "'' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
Pégalo en cualquier lugar, debería funcionar incluso cuando ejecutas este código antes de que DOM esté listo (simplemente no mostrará tu información sobre herramientas hasta que DOM esté listo).
Personalizar
Puede cambiar las declaraciones de var en la segunda línea para personalizarlo un poco.
var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip''s distance to the cursor
Estilo
Ahora puede diseñar sus tooltips utilizando el siguiente CSS:
#tooltip {
background: #fff;
border: 1px solid red;
padding: 3px 10px;
}
Un jsfiddle para el patrón personalizado de información sobre herramientas está Here
Se basa en el posicionamiento CSS y los selectores de clase pseduo
Verifique los documentos de MDN para soporte de navegador cruzado de pseudo clases
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
Yo recomendaría una información sobre herramientas de Javascript. He usado la información sobre herramientas de Zorn a menudo y amo la flexibilidad: http://www.walterzorn.de/en/tooltip/tooltip_e.htm
También hay algunas opciones de jQuery si está más cómodo: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
a[title="My site"] {
color: red;
}
Esto también funciona con cualquier atributo que quiera agregar, por ejemplo:
HTML
<div class="my_class" anything="whatever">My Stuff</div>
CSS
.my_class[anything="whatever"] {
color: red;
}
Véalo trabajar en: http://jsfiddle.net/vpYWE/1/