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

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

Par exemple, j’ai un DIV avec atsortingbut 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 rest inchangée. Y a-t-il un moyen de faire évoluer l’échelle de police de l’info-bulle avec les parameters du navigateur?

Non, mais il y a d’autres options comme Overlib et jQuery qui vous permettent cette liberté.

Personnellement, je suggère que jQuery soit la 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 ).

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

Par exemple:

 
Hover Me

Non, ce n’est pas possible, les navigateurs ont leur propre façon d’implémenter une info-bulle. Tout ce que vous pouvez faire est de créer une div qui se comporte comme une info-bulle HTML (principalement c’est juste “show on hover”) avec Javascript, et ensuite le style comme vous le souhaitez.

Avec cela, vous ne devriez pas avoir à vous soucier du zoom avant ou arrière du navigateur, puisque le texte à l’intérieur du div tooltip est un HTML réel, il serait mis à l’échelle en conséquence.

Voir le post de Jonathan pour une bonne ressource.

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, je suis arrivé avec les éléments suivants:

 

Content with
normal formatting

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
  • Il fonctionne dans (presque) tous les navigateurs

Les inconvénients:

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

Mootools a également une belle classe «Tips» disponible dans leur «plus constructeur».

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

Je ne suis pas sûr que cela fonctionne avec tous les navigateurs ou les outils tiers, mais j’ai réussi à spécifier “\ n” dans les info-bulles pour newline, fonctionne avec dhtmlx au moins dans 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 ssortingng 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; } 
 
Division 1

Je sais que c’est un ancien message mais je voudrais append ma réponse pour référence future. J’utilise jQuery et css pour personnaliser mes infobulles: easyiest-tooltip-et-image-preview-using-jquery (pour une démonstration: http://cssglobe.com/lab/tooltip/02/ ) Sur mes sites statiques, cela a fonctionné génial. Cependant, lors de la migration vers WordPress, il s’est arrêté. Ma solution consistait à changer les balises telles que les balises
and
en ceci: <br> and <span> <br> and <span> Cela fonctionne pour moi.

Dans l’info-bulle bootstrap, utilisez simplement data-html = “true”