È possibile formattare un tooltip HTML (attributo titolo)?[duplicare]

https://stackoverflow.com/questions/484137

html
tooltip

20-08-2019
|

Domanda

Questa domanda ha già una risposta qui:

Come modificare lo stile dell'attributo titolo all'interno di un tag di ancoraggio? 10 risposte

È possibile formattare un tooltip HTML?

Per esempio.Ho un DIV con l'attributo title="foo!".Quando ingrandisco o rimpicciolisco la dimensione del testo del mio browser, la dimensione del testo del suggerimento rimane invariata.C'è un modo per ridimensionare il carattere della descrizione comando con l'impostazione del browser?

Soluzione

No. Ma ci sono altre opzioni là fuori come Overlib e jQuery che ti consente questa libertà.

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

Personalmente, suggerirei jQuery come percorso da percorrere. In genere è molto discreto e non richiede alcuna configurazione aggiuntiva nel markup del tuo sito (ad eccezione dell'aggiunta del tag script jquery nel tuo & Lt; head & Gt;).

Altri suggerimenti

Prova a utilizzare codici entità come  per CR, 
 per LF e 	 per TAB.

Ad esempio:

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

sembra che tu possa usare css e un trucco (no javascript) per farlo:

http://davidwalsh.name/css-tooltips

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

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

http://csstooltip.com

Meglio tardi che mai, dicono sempre.

Normalmente userei jQuery per risolvere una situazione del genere. Tuttavia, quando lavoravo su un sito per un client che richiedeva una soluzione senza javascript, mi è venuto in mente quanto segue:

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

Usando il seguente css, ottieni la stessa situazione di un titolo:

.hover-container {
    position: relative;
}

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

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

Questo ti dà la possibilità di modellarlo secondo le tue esigenze e funziona su tutti i browser. Anche quelli in cui javascript è disabilitato.

Pro:

Hai molta influenza sullo stile
Funziona in (quasi) tutti i browser

Contro:

È più difficile posizionare la descrizione comandi

No, non è possibile, i browser hanno i loro modi per implementare tooltip. Tutto quello che puoi fare è creare alcuni div che si comportino come una descrizione dei comandi HTML (principalmente è solo "mostra al passaggio del mouse") con Javascript e quindi modellarli nel modo desiderato.

Con questo, non dovresti preoccuparti dello zoom avanti o indietro del browser, poiché il testo all'interno del div tooltip è un vero HTML, si ridimensionerebbe di conseguenza.

Vedi post di Jonathan per qualche buona risorsa .

Mootools ha anche una bella classe di "Suggerimenti" disponibile nel loro "più costruttore".

Non sono sicuro che funzioni con tutti i browser o strumenti di terze parti, ma ho avuto successo semplicemente specificando " \ n " in tooltip per newline, funziona con dhtmlx almeno in ie11, firefox e chrome

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

Ho scritto questa piccola funzione javascript che converte tutti i tooltip del titolo nativo in nodi stilizzati: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

Professionisti:

Non devi convertire nulla.Scrivi semplicemente il tuo solito codice HTML con gli attributi del titolo nativo.
Puoi utilizzare tag HTML e stili in linea nei suggerimenti del titolo.(Vedi l'esempio con l'intera tabella HTML in un titolo con il proprio stile)

Contro:

È Javascript
Non testato su tutti i browser esistenti, ma funziona bene con le ultime versioni di Chrome, FF, IE e Opera

Probabilmente può essere scritto in modo più elegante e potrebbe contenere alcune righe non necessarie.

Inoltre, lo snippet di codice StackOverflow non è in grado di analizzare correttamente il codice HTML, quindi controllalo sul collegamento jsfiddle che ho fornito.

So che questo è un vecchio post, ma vorrei aggiungere la mia risposta per riferimento futuro. Uso jQuery e css per dare uno stile alle mie descrizioni: più facile-tooltip-e-image-preview-using-jquery (per una demo: http://cssglobe.com/lab/tooltip/02/ ) Sui miei siti Web statici ha funzionato alla grande. Tuttavia, durante la migrazione a Wordpress si è interrotto. La mia soluzione è stata quella di cambiare tag come <br> and <span> in questo: <br> and <span> Questo funziona per me.

Nella descrizione comandi bootstrap basta usare data-html = " true "

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow