web-dev-qa-db-fra.com

Est-il possible de formater une info-bulle HTML (attribut title)?

Est-il possible de formater une info-bulle HTML?

Par exemple. J'ai un DIV avec l'attribut title = "foo!". Lorsque je fais un zoom avant ou arrière sur la taille du texte de mon navigateur, la taille du texte de l'info-bulle reste inchangée. Existe-t-il un moyen de faire évoluer l'info-bulle avec la configuration du navigateur?

htmltooltip
72
sunflowerpower

Non, mais il existe d'autres options telles que Overlib et jQuery qui vous permettent cette liberté.

Personnellement, je suggérerais jQuery comme voie à suivre. C'est généralement très discret et ne nécessite aucune configuration supplémentaire dans le balisage de votre site (à l'exception de l'ajout de la balise de script jQuery dans votre <head>).

41
Sampson

Essayez d'utiliser des codes d'entité tels que &#013; pour CR, &#010; pour LF et &#009; pour TAB.

Par exemple:

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

62
Louis

il semble que vous puissiez utiliser css et une astuce (pas de javascript) pour le faire:

http://davidwalsh.name/css-tooltips

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

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

http://csstooltip.com

16
matteo galiazzo

Mieux vaut tard que jamais, disent-ils toujours.

Normalement, j'utiliserais jQuery pour résoudre une telle situation. Cependant, lorsque je travaillais sur un site pour un client nécessitant une solution sans javascript, j’ai proposé ce qui suit:

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

En utilisant le css suivant, vous obtenez la même situation qu'avec un titre:

.hover-container {
    position: relative;
}

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

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

Cela vous donne également la possibilité de le personnaliser en fonction de vos besoins et fonctionne dans tous les navigateurs. Même ceux où javascript est désactivé.

Avantages:

  • Vous avez beaucoup d'influence sur le style
  • Cela fonctionne dans (presque) tous les navigateurs

Les inconvénients:

  • Il est plus difficile de positionner l'info-bulle
3
Sander Koedood

Non, ce n'est pas possible, les navigateurs ont leurs propres façons d'implémenter les info-bulles. Tout ce que vous pouvez faire est de créer une div qui se comporte comme une info-bulle HTML (le plus souvent, elle est simplement "afficher en survol") avec Javascript, puis de la styler comme vous le souhaitez.

Avec cela, vous n'aurez plus à vous soucier du zoom avant ou arrière du navigateur, puisque le texte à l'intérieur de la bulle d'aide est un code HTML réel, il sera donc redimensionné en conséquence.

Voir Jonathan's post pour une bonne ressource.

2
andyk

Ce n'est pas possible. Mais vous pouvez utiliser certaines bibliothèques javascript pour créer une telle info-bulle, par exemple. http://www.taggify.net/

2
Anton

J'ai écrit cette petite fonction javascript qui convertit toutes les info-bulles de votre titre natif en nœuds stylisés: 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

Avantages:

  • Vous n'avez rien à convertir. Il suffit d'écrire votre code HTML habituel avec les attributs de titre natifs.
  • Vous pouvez utiliser des balises HTML et un style en ligne dans les info-bulles du titre. (Voir l'exemple avec un tableau HTML complet dans un titre avec son propre style)

Les inconvénients:

  • C'est javascript
  • Non testé sur tous les navigateurs existants, mais fonctionne parfaitement avec les dernières versions de Chrome, FF, IE et Opera.

Il peut probablement être écrit de manière plus élégante et peut comporter quelques lignes inutiles.

De plus, l'extrait de code stackoverflow ne peut pas analyser le code HTML correctement, vérifiez-le donc sur le lien jsfiddle que j'ai fourni.

1
BurakUeda

Mootools propose également une classe de "astuces" dans leur "constructeur".

1
tj111

Je ne sais pas si cela fonctionne avec tous les navigateurs ou les outils tiers, mais j'ai réussi à spécifier "\ n" dans les info-bulles pour les nouvelles lignes, fonctionne avec dhtmlx dans au moins ie11, firefox et chrome

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

Je sais que c’est un article ancien, mais j’aimerais ajouter ma réponse pour référence future . J’utilise jQuery et css pour styliser mes info-bulles: une démo: http://cssglobe.com/lab/tooltip/02/ ) Sur mes sites statiques, cela fonctionnait très bien. Cependant, lors de la migration vers Wordpress, cela s’est arrêté. Ma solution a été de changer les balises comme <br> and <span> en ceci: &lt;br&gt; and &lt;span&gt; Cela fonctionne pour moi.

0
Jurgen