¿Cómo cambiar el estilo del atributo de título dentro de una etiqueta de anclaje?

Ejemplo:

 Link  

¿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 } 
 LinkThis is the CSS tooltip showing up when you mouse over the link 

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

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.

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 TITLE definido (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 nesteds 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); $("
").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á aquí

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

   

I am a (This website rocks)   a developer.

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

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; } 
  Link  with styled tooltip (bigger and with a different background color, as requested in the question)
Link with normal tooltip

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/

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

 Exposed text 

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.

 a[title="My site"] { color: red; } 

Esto también funciona con cualquier atributo que quiera agregar, por ejemplo:

HTML

 
My Stuff

CSS

 .my_class[anything="whatever"] { color: red; } 

Véalo trabajar en: http://jsfiddle.net/vpYWE/1/