Ejemplo:

<a href="example.com" title="My site"> Link </a>

¿Cómo cambio la presentación del atributo "título" en el navegador? Por defecto, solo tiene fondo amarillo y fuente pequeña. Me gustaría agrandarlo y cambiar el color de fondo.

¿Hay alguna forma CSS para diseñar el atributo de 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>

Parece que, de hecho, hay una solución CSS pura, que solo requiere el CSS attr expresión , el contenido generado y los selectores de atributos (lo que sugiere que funciona desde IE8):

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

Fuente: https://jsfiddle.net/z42r2vv0/2/

actualizar con entrada de @ViROscar: tenga en cuenta que no es necesario usar ningún atributo específico, aunque he usado el atributo "título" en el ejemplo anterior; en realidad, mi recomendación sería usar el atributo "alt", ya que hay alguna posibilidad de que el contenido sea accesible para los usuarios que no puedan beneficiarse de CSS.

actualizar de nuevo No estoy cambiando el código porque el atributo "título" básicamente ha llegado a significar el atributo "información sobre herramientas", y probablemente no sea una buena idea ocultar texto importante dentro de un campo solo accesible al pasar el mouse, pero si interesado en hacer que este texto sea accesible, 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

No puedes diseñar un real title atributo

El titlenavegador define cómo se muestra el texto en el atributo y varía de un navegador a otro. No es posible que una página web aplique ningún estilo a la información sobre herramientas que muestra el navegador en función del titleatributo.

Sin embargo, puede crear algo muy similar utilizando 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 data-titleatributo. data-*Los atributos 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 seleccionarse mediante CSS.

Dado que puede usar CSS para seleccionar elementos con data-titleatributos, puede usar CSS para crear :after(o :before) contentque contenga el valor del atributo usandoattr() .

Ejemplos de información sobre herramientas con estilo

Más grande y con un color de fondo diferente (por solicitud de 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 un real title herramientas , no se garantiza necesariamente que la información sobre herramientas producida por el CSS anterior sea visible en la página (es decir, podría estar fuera del área visible). Por otro lado, se garantiza que está dentro de la ventana actual, que no es el caso para una información sobre herramientas real.

Además, la pseudo-información sobre herramientas se coloca en relación con el elemento que tiene la pseudo-información sobre herramientas en lugar de en relación con la ubicación del mouse en ese elemento. Es posible que desee ajustar con precisión dónde se muestra la pseudo-información sobre herramientas. Hacer que aparezca en una ubicación conocida en relación con el elemento puede ser un beneficio o un inconveniente, dependiendo de la situación.

No puede usar :beforeo :afteren elementos que no sean contenedores

Hay una buena explicación en esta respuesta a "¿Puedo usar un pseudo-elemento: before o: after en un campo de entrada?"

Efectivamente, esto significa que no puede usar este método directamente en elementos como <input type="text"/>,<textarea/> , <img>, etc. La solución fácil es envolver el elemento que no es un recipiente en una <span>o <div>y tienen la pseudo-tooltip en el envase.

Ejemplos de uso de una pseudo-información sobre herramientas para <span>envolver un elemento que no sea contenedor:

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

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

^{Por el código en la publicación del blog vinculada anteriormente (que vi por primera vez en una respuesta aquí que lo plagió), me pareció obvio usar un data-*atributo en lugar del titleatributo. Hacerlo también se sugirió en un comentario de snostorm sobre esa respuesta (ahora eliminada).}

CSS no puede cambiar la apariencia de la información sobre herramientas. Es navegador / OS-dependiente. Si desea algo diferente, tendrá que usar Javascript para generar marcado cuando pase el cursor sobre el elemento en lugar de la información sobre herramientas predeterminada.

Pensé que publicaría mi solución JavaScript de 20 líneas aquí. No es perfecto, pero puede ser útil para algunos dependiendo de lo que necesite de la información sobre herramientas.

Cuando usarlo

• Diseña automáticamente la información sobre herramientas para todos los elementos HTML con un TITLE atributo definido (esto incluye elementos agregados dinámicamente al documento en el futuro)
• No se requieren cambios o modificaciones de Javascript / HTML para cada información sobre herramientas (solo el TITLE atributo, semánticamente claro)
• Muy ligero (agrega aproximadamente 300 bytes comprimidos y minimizados)
• Desea solo una información sobre herramientas con estilo muy básica

Cuando NO usar

• Requiere jQuery, así que no lo use si no usa jQuery
• Mal soporte para elementos anidados que tienen información sobre herramientas
• Necesita más de una información sobre herramientas en la pantalla al mismo tiempo
• Necesita la información sobre herramientas para desaparecer 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éguelo en cualquier lugar, debería funcionar incluso cuando ejecuta este código antes de que el DOM esté listo (simplemente no mostrará su información sobre herramientas hasta que DOM esté listo).

Personalizar

Puede cambiar las vardeclaraciones 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 su información sobre herramientas utilizando el siguiente CSS:

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

He encontrado la respuesta aquí: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

mi propio código es así, he cambiado el nombre del atributo, si mantiene el nombre del título para el atributo, termina teniendo dos ventanas emergentes para el mismo texto, otro cambio es que mi texto al pasar el mouse se muestra debajo del texto expuesto.

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

<a class="tags" glose="Text shown on hovering">Exposed text</a>

Un jsfiddle para el patrón de información sobre herramientas personalizado está aquí

Se basa en posicionadores CSS y selectores de clase pseduo

Verifique los documentos de MDN para la compatibilidad entre navegadores de pseudo clases

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; 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;
}

La información sobre herramientas nativa no se puede diseñar.

Dicho esto, puede usar alguna biblioteca que muestre capas flotantes de estilos cuando se desplaza el elemento (en lugar de la información sobre herramientas nativa, y suprimirlos) que requieren poca o ninguna modificación de código ...

No puede diseñar la información sobre herramientas predeterminada del navegador. Pero puede usar JavaScript para crear sus propias sugerencias de herramientas HTML personalizadas.

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

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

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

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

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