É possível formatar uma dica HTML (atributo título)? [duplicado]

https://stackoverflow.com/questions/484137

html
tooltip

20-08-2019
|

Pergunta

Esta questão já tem uma resposta aqui:

Como mudar o estilo do título atributo dentro de uma marca de âncora? 10 respostas

É possível formatar um HTML dica?

por exemplo. Eu tenho uma DIV com o título atributo = "foo!". Quando eu tiver texto-tamanho do meu navegador ampliada ou reduzida em, o tamanho do texto da dica de ferramenta permanece inalterada. Existe uma maneira de fazer a escala de fonte dica com a configuração do navegador?

Solução

No. Mas há outras opções lá fora, como overLib , e jQuery que permitem essa liberdade.

jTip: http://www.codylindley.com/blogstuff/js/jtip/
jQuery Dica: https://jqueryui.com/tooltip/

Pessoalmente, gostaria de sugerir jQuery como o caminho a tomar. É normalmente muito discreto, e não exige nenhuma configuração adicional na marcação do seu site (com a exceção de adicionar a tag script jquery em seu ).

Outras dicas

Tente usar códigos de entidade como  para CR, 
 para LF, e 	 para TAB.

Por exemplo:

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>

parece que você pode usar css e um truque (sem javascript) para fazê-lo:

http://davidwalsh.name/css-tooltips

http://www.menucool.com/tooltip/css-tooltip

http://sixrevisions.com/css/css-only-tooltips/

http://csstooltip.com

Melhor tarde do que nunca, eles sempre dizem.

Normalmente eu uso jQuery para resolver tal situação a. No entanto, quando se trabalha em um site para um cliente que necessitava de uma solução javascript-menos, eu vim com o seguinte:

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>

Ao usar o seguinte css, você recebe a mesma situação que com um título:

.hover-container {
    position: relative;
}

.hover-content {
    position: absolute;
    bottom: -10px;
    right: 10px;
    display: none;
}

.hover-container:hover .hover-content {
    display: block;
}

Isto dá-lhe a opção de estilo de acordo com suas necessidades, bem como, e funciona em todos os navegadores. Mesmo aqueles onde JavaScript desabilitado.

Pros:

Você tem muita influência sobre o estilo
Ele funciona em (quase) todos os navegadores

Contras:

É mais difícil para posicionar a dica de ferramenta

Não, não é possível, os navegadores têm suas próprias maneiras de implementar dica. Tudo o que você pode fazer é criar algum div que se comporta como uma dica de ferramenta HTML (a maioria é apenas 'show em foco') com Javascript, e, em seguida, estilo-lo da maneira que quiser.

Com isso, você não precisa se preocupar com zoom do navegador dentro ou para fora, uma vez que o texto dentro do div dica é um HTML real, seria escalonar em conformidade.

Veja o pós por algum bom recurso Jonathan .

Mootools também tem um bom classe 'Dicas' disponível no seu 'mais construtor'.

Não tenho certeza se ele funciona com todos os navegadores ou ferramentas 3rd party, mas tive sucesso apenas especificando "\ n" nas dicas para nova linha, trabalha com DHTMLX em pelo menos ie11, Firefox e Chrome

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}

Eu escrevi essa função javascript pequena que converte todos os seus dicas título nativo em nós estilizados: http://jsfiddle.net/BurakUeda/g8r8L4vt/1/

mo_title = null;
mo_element = null;

document.onmousemove = function (e) {
	var event = e || window.event;
	var current_title;
	var moposx = e.pageX;  // current 
	var moposy = e.pageY;  // mouse positions

	var tooltips = document.getElementById("tooltips");  // element for displaying stylized tooltips (div, span etc.)

	var current_element = event.target || event.srcElement;  // the element we're currently hovering
	if (current_element == mo_element) return;  // we're still hovering the same element, so ignore
	if(current_element.title){
		current_title = current_element.title;  
	} else {
		current_title = "-_-_-";         // if current element has no title, 
		current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title
	}
	if(mo_element == null){   // this is our first element  
		mo_element = current_element;
		mo_title = current_title;
	}
	if(mo_title) mo_element.title = mo_title;   // restore the title of the previous element

	mo_element = current_element;  // set current values
	mo_title = current_title;      // as default

	if(mo_element.title){
		var mo_current_title = mo_element.title;  // save the element title
		mo_element.title = "";  // set it to none so it won't show over our stylized tooltip
		if(mo_current_title == "-_-_-"){   //  if the title is fake, don't display it
			tooltips.style.display = "none";
			tooltips.style.left = "0px";
			tooltips.style.left = "0px";
			tooltips.innerHTML = "";
		} else { 
			tooltips.style.display = "inline-block";
			tooltips.style.left = (moposx + 10) + "px";
			tooltips.style.top = (moposy + 10) + "px";
			tooltips.innerHTML = mo_current_title;
		}
	}
};

#tooltips {
    display: none;
    position: absolute;
    left 0;
    top: 0;
    color: white;
    background-color: darkorange;
    box-shadow: black 2px 2px 2px;
    padding: 5px;
    border-radius:5px;
}

#buttoncontainer{
    border: 1px black solid;
    padding: 10px;
    margin: 5px;
}

<div id="tooltips"></div>
<div>
    <div title="DIV #1">Division 1</div>
    <div id="buttoncontainer" title="Button container">
        <button title="Button with title"> Button #1 </button>
        <button> Button w/o title </button>
        <button title="
            <table border='1' cellpadding='4' cellspacing='0'>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #1</td>
                    <td style='text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #2</td>
                    <td style='text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #3</td>
                    <td style='text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px'>Description 1</td>
                </tr>
            </table>
        "> Button title containing HTML </button>
    </div>
</div

Pros:

Você não tem que converter qualquer coisa. Basta escrever seu HTML normal com atributos título nativo.
Você pode usar tags HTML e em linha denominando suas dicas de título. (Veja o exemplo com a tabela HTML inteiro em um título com o seu próprio estilo)

Contras:

É javascript
Não testado em todos os navegadores em existência, mas funciona perfeitamente com versões mais recentes do Chrome, FF, IE e Opera

Provavelmente pode ser escrito mais elegantemente e pode ter algumas linhas que é desnecessário.

Além disso, o código stackoverflow trecho coisinha não pode analisar o código HTML corretamente, de modo a verificar-lo no link jsFiddle I fornecido.

Eu sei que este é um post antigo, mas eu gostaria de acrescentar a minha resposta para referência futura. Eu uso jQuery e CSS para estilizar as minhas dicas: mais fácil de tooltip-e-image-visualização em utilizando-jquery (Para uma demonstração: http://cssglobe.com/lab/tooltip/02/ ) Em meus sites estáticos isso só funcionou muito bem. No entanto, durante a migração para o Wordpress parou. Minha solução foi a tags mudança como <br> and <span> a este: <br> and <span> Isso funciona para mim.

Na inicialização dica apenas dados em html uso = "true"

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow