Exemplo:

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

Como altero a apresentação do atributo "title" no navegador ?. Por padrão, ele possui apenas fundo amarelo e fonte pequena. Gostaria de torná-lo maior e alterar a cor do plano de fundo.

Existe uma maneira CSS de estilizar o atributo title?

Aqui está um exemplo de como fazê-lo:

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 existe de fato uma solução CSS pura, exigindo apenas a attrexpressão css , o conteúdo gerado e os seletores de atributo (o que sugere que ele funcione já no IE8):

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

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

atualização com entrada do @ViROscar: observe que não é necessário usar nenhum atributo específico, embora eu tenha usado o atributo "title" no exemplo acima; na verdade, minha recomendação seria usar o atributo "alt", pois há alguma chance de que o conteúdo seja acessível a usuários incapazes de se beneficiar do CSS.

atualizar novamente Não estou alterando o código, porque o atributo "title" passou a significar o atributo "tooltip", e provavelmente não é uma boa ideia ocultar texto importante dentro de um campo acessível apenas ao passar o mouse, mas se você estiver interessado em tornar este texto acessível o atributo "aria-label" parece ser o melhor lugar para ele: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Você não pode estilizar um titleatributo real

Como o texto no titleatributo é exibido é definido pelo navegador e varia de navegador para navegador. Não é possível que uma página da web aplique nenhum estilo à dica de ferramenta exibida pelo navegador com base no titleatributo.

No entanto, você pode criar algo muito semelhante usando outros atributos.

Você pode fazer uma pseudo-dica de ferramenta com CSS e um atributo personalizado (por exemplo data-title)

Para isso, eu usaria um data-titleatributo. data-*atributos são um método para armazenar dados personalizados em elementos DOM / HTML. Existem várias maneiras de acessá-los . Importante, eles podem ser selecionados por CSS.

Como você pode usar o CSS para selecionar elementos com data-titleatributos, poderá usar o CSS para criar :after(ou :before) contentque contenha o valor do atributo em uso attr().

Exemplos de dicas de ferramentas com estilo

Maior e com uma cor de fundo diferente (por solicitação da pergunta):

[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 mais elaborado (adaptado desta postagem do 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 conhecidos

Diferentemente de uma titledica de ferramenta real , a dica de ferramenta produzida pelo CSS acima não é necessariamente garantida para estar visível na página (ou seja, pode estar fora da área visível). Por outro lado, é garantido que esteja dentro da janela atual, o que não é o caso de uma dica de ferramenta real.

Além disso, a pseudo-dica de ferramenta é posicionada em relação ao elemento que possui a pseudo-dica de ferramenta em vez de em relação ao local onde o mouse está nesse elemento. Você pode ajustar onde a pseudo-dica de ferramenta é exibida. Fazer com que ele apareça em um local conhecido em relação ao elemento pode ser um benefício ou uma desvantagem, dependendo da situação.

Você não pode usar :beforeou :afterem elementos que não são contêineres

Há uma boa explicação nesta resposta para "Posso usar o pseudoelemento a: before ou: after em um campo de entrada?"

Efetivamente, isto significa que você não pode usar esse método diretamente em elementos como <input type="text"/>, <textarea/>, <img>, etc. A solução mais fácil é para embrulhar o elemento que não é um recipiente em um <span>ou <div>e ter a pseudo-dica de ferramenta no recipiente.

Exemplos de uso de uma pseudo-dica de ferramenta em um <span>agrupamento de um elemento não contêiner:

[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/>

^{A partir do código do post do link acima (que eu vi pela primeira vez em uma resposta aqui que a plagiou), parecia óbvio para mim usar um data-*atributo em vez do titleatributo. Isso também foi sugerido em um comentário do snostorm sobre a resposta (agora excluída).}

O CSS não pode alterar a aparência da dica de ferramenta. É dependente do navegador / SO. Se você quiser algo diferente, precisará usar o Javascript para gerar marcação quando passar o mouse sobre o elemento em vez da dica de ferramenta padrão.

Eu pensei em postar minha solução JavaScript de 20 linhas aqui. Não é perfeito, mas pode ser útil para alguns, dependendo do que você precisa em suas dicas de ferramentas.

Quando usá-lo

• Estiliza automaticamente a dica de ferramenta para todos os elementos HTML com um TITLEatributo definido (isso inclui elementos adicionados dinamicamente ao documento no futuro)
• Não são necessárias alterações de Javascript / HTML ou hacks para cada dica de ferramenta (apenas o TITLEatributo, semântica clara)
• Muito leve (adiciona cerca de 300 bytes compactados e compactados)
• Você deseja apenas uma dica de ferramenta estilizada muito básica

Quando NÃO usar

• Requer jQuery, portanto, não use se você não usar jQuery
• Suporte incorreto para elementos aninhados que possuem dicas de ferramentas
• Você precisa de mais de uma dica de ferramenta na tela ao mesmo tempo
• Você precisa que a dica de ferramenta desapareça após algum tempo

O 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); }
}());

Cole-o em qualquer lugar, ele deve funcionar mesmo quando você executa esse código antes que o DOM esteja pronto (ele não mostrará suas dicas até que o DOM esteja pronto).

Customizar

Você pode alterar as vardeclarações na segunda linha para personalizá-lo um pouco.

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

Agora você pode estilizar suas dicas de ferramentas usando o seguinte CSS:

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

Encontrei a resposta aqui: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

meu próprio código é assim, eu mudei o nome do atributo; se você mantiver o nome do título para o atributo, acabará tendo dois pop-ups para o mesmo texto, outra mudança é que meu texto ao passar o mouse é exibido embaixo do texto exposto.

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

Um jsfiddle para o padrão de dica de ferramenta personalizada está aqui

Ele é baseado no posicionamento CSS e nos seletores de classe pseduo

Verifique os documentos MDN para suporte a pseudo classes em vários navegadores

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

A dica de ferramenta nativa não pode ser estilizada.

Dito isto, você pode usar alguma biblioteca que mostre estilos de camadas flutuantes quando o elemento estiver sendo pairado (em vez das dicas nativas e suprimi-las), exigindo poucas ou nenhuma modificação de código ...

Você não pode estilizar a dica de ferramenta padrão do navegador. Mas você pode usar o javascript para criar suas próprias dicas de ferramentas HTML personalizadas.

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

Isso também funciona com qualquer atributo que você deseja adicionar, por exemplo:

HTML

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

CSS

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

Veja o trabalho em: http://jsfiddle.net/vpYWE/1/