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

StackOverflow https://stackoverflow.com/questions/484137

  •  20-08-2019
  •  | 
  •  

Question

    

Cette question a déjà une réponse ici:

         

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

E.g. J'ai une DIV avec 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 en sorte que la police d’infos d’outils s’adapte au navigateur?

Était-ce utile?

La solution

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

Personnellement, je suggérerais jQuery comme voie à suivre. Il 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 & Lt; tête & Gt;).

Autres conseils

Essayez d'utiliser des codes d'entité tels que 
 pour CR, 
 pour LF et 	 pour TAB.

Par exemple: 

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

Mieux vaut tard que jamais, disent-ils toujours.

Normalement, jQuery s’appliquerait pour résoudre une telle situation. Cependant, lorsque je travaillais sur un site pour un client qui nécessitait 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 la possibilité de le personnaliser en fonction de vos besoins, et cela 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

Inconvénients:

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

Non, ce n’est pas possible, les navigateurs ont leurs propres moyens pour 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 la styler comme vous le souhaitez.

Avec cela, vous n'aurez plus à vous soucier du zoom avant ou arrière du navigateur, car le texte contenu dans l'info-bulle div est un code HTML réel, il est ainsi redimensionné en conséquence.

Voir le message de Jonathan pour une bonne ressource .

Mootools propose également un agréable cours intitulé "Astuces" disponible dans leur "constructeur plus".

Je ne sais pas si cela fonctionne avec tous les navigateurs ou les outils tiers, mais j'ai réussi à spécifier simplement! " \ n " infobulles pour newline, 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];
}

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 de titre. (Voir l'exemple avec un tableau HTML complet dans un titre avec son propre style)

Inconvénients:

  • c’est javascript
  • Non testé sur tous les navigateurs existants, mais fonctionne correctement 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.

Je sais que ceci est un ancien message, mais je voudrais ajouter ma réponse pour référence future. J'utilise jQuery et css pour styler mes info-bulles: info-bulle et image-preview-using-jquery (pour une démonstration: 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 était de changer les balises comme <br> and <span> en ceci: &lt;br&gt; and &lt;span&gt; Cela fonctionne pour moi.

Dans l'info-bulle d'amorçage, utilisez simplement data-html = & "true &";

.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top