personalizar - tag title html




Como mudar o estilo do atributo title dentro de uma tag âncora? (7)

Você não pode estilizar um atributo de title real

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

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

Você pode fazer uma pseudo-tooltip com CSS e um atributo personalizado (por exemplo, data-title )

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

Dado que você pode usar CSS para selecionar elementos com atributos de data-title , você pode usar CSS para criar :after (or :before ) content que contém o valor do atributo usando attr() .

Exemplos de dica de ferramenta estilizada

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

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

A partir do código na postagem do blog acima (que vi pela primeira vez em uma resposta aqui que o plagiou), pareceu-me óbvio usar um atributo data-* vez do atributo title . Isso também foi sugerido em um comentário por snostorm sobre essa resposta (agora excluída).

Exemplo:

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

Como eu mudo o atributo "title". Por padrão, tem apenas fundo amarelo e fonte pequena. Eu gostaria de torná-lo maior e mudar a cor de fundo.

Existe uma maneira de CSS para estilizar o atributo de título?


Aqui está um exemplo de como fazer isso:

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>


Eu 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 você acaba tendo dois popups para o mesmo texto, outra mudança é que o meu texto em pairar é exibido abaixo 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>


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 de suas dicas de ferramentas.

Quando usar

  • Estilos automaticamente a dica de ferramenta para todos os elementos HTML com um atributo TITLE definido (isso inclui elementos adicionados dinamicamente ao documento no futuro)
  • Nenhuma alteração de Javascript / HTML ou hacks necessária para cada dica de ferramenta (apenas o atributo TITLE , semanticamente claro)
  • Muito leve (adiciona cerca de 300 bytes gzipados e minificados)
  • Você quer apenas uma dica de ferramenta estilizável básica

Quando NÃO usar

  • Requer jQuery, então não use se você não usa jQuery
  • Suporte ruim para elementos aninhados que possuem dicas de ferramentas
  • Você precisa de mais de uma dica de ferramenta na tela ao mesmo tempo
  • Você precisa da dica de ferramenta para desaparecer depois de 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ê executar este código antes que o DOM esteja pronto (ele simplesmente não mostrará suas dicas até que o DOM esteja pronto).

Customizar

Você pode alterar as declarações var 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 usando o seguinte CSS:

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

Parece que há, de fato, uma solução CSS pura, exigindo apenas a expressão css attr , o conteúdo gerado e os seletores de atributos (o que sugere que funcione até o IE8):

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

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

update w / input from @ViROscar: por favor note 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 que não podem se beneficiar do CSS.

update again Eu não estou mudando o código porque o atributo "title" basicamente passou a significar o atributo "tooltip", e provavelmente não é uma boa idéia esconder um texto importante dentro de um campo acessível apenas por passar o mouse, mas se você estiver interessado em tornar este texto acessível, o atributo "aria-label" parece ser o melhor lugar para isso: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute


Um jsfiddle para o padrão personalizado de dica de ferramenta é Here

Ele é baseado em seleções de Posicionamento CSS e classe pseduo

Verificar documentos do MDN para suporte entre navegadores de pseudo classes

    <!-- 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[title="My site"] {
    color: red;
}

Isso também funciona com qualquer atributo que você queira 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/





css