L'infobulle de l'interface utilisateur de Jquery ne prend pas en charge le contenu HTML

Aujourd'hui, j'ai mis à jour tous mes plug-ins jQuery avec jQuery 1.9.1. Et j'ai commencé à utiliser l'info-bulle jQueryUI avec jquery.ui.1.10.2. Tout était bon. Mais lorsque j'ai utilisé des balises HTML dans le contenu (dans l' titleattribut de l'élément auquel j'appliquais l'info-bulle), j'ai remarqué que HTML n'est pas pris en charge.

Voici une capture d'écran de mon info-bulle:

Comment puis-je faire fonctionner le contenu HTML avec l'info-bulle jQueryUI dans 1.10.2?

Edit : Comme cela s'est avéré être une réponse populaire, j'ajoute la clause de non- responsabilité mentionnée par @crush dans un commentaire ci-dessous. Si vous utilisez cette solution, sachez que vous vous ouvrez à une vulnérabilité XSS . N'utilisez cette solution que si vous savez ce que vous faites et pouvez être certain du contenu HTML de l'attribut.

Le moyen le plus simple de le faire est de fournir une fonction à l' contentoption qui remplace le comportement par défaut:

$(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

Exemple: http://jsfiddle.net/Aa5nK/12/

Une autre option serait de remplacer le widget d'info-bulle par le vôtre qui modifie l' contentoption:

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

Désormais, chaque fois que vous appelez .tooltip, le contenu HTML sera renvoyé.

Exemple: http://jsfiddle.net/Aa5nK/14/

Au lieu de cela:

$(document).tooltip({
    content: function () {
        return $(this).prop('title');
    }
});

utilisez ceci pour de meilleures performances

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});

Je l'ai résolu avec une balise de données personnalisée, car un attribut de titre est de toute façon requis.

$("[data-tooltip]").each(function(i, e) {
    var tag = $(e);
    if (tag.is("[title]") === false) {
        tag.attr("title", "");
    }
});

$(document).tooltip({
    items: "[data-tooltip]",
    content: function () {
        return $(this).attr("data-tooltip");
    }
});

Comme ça, il est conforme au HTML et les info-bulles ne sont affichées que pour les balises voulues.

Vous pouvez également y parvenir complètement sans jQueryUI en utilisant des styles CSS. Voir l'extrait ci-dessous:

div#Tooltip_Text_container {
  max-width: 25em;
  height: auto;
  display: inline;
  position: relative;
}

div#Tooltip_Text_container a {
  text-decoration: none;
  color: black;
  cursor: default;
  font-weight: normal;
}

div#Tooltip_Text_container a span.tooltips {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;
  position: absolute;
  left: 10px;
  top: 18px;
  width: 30em;
  border: 1px solid #404040;
  padding: 0.2em 0.5em;
  cursor: default;
  line-height: 140%;
  font-size: 12px;
  font-family: 'Segoe UI';
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 7px 7px 5px -5px #666;
  -webkit-box-shadow: 7px 7px 5px -5px #666;
  box-shadow: 7px 7px 5px -5px #666;
  background: #E4E5F0  repeat-x;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

div#Tooltip_Text_container img {
  left: -10px;
}

div#Tooltip_Text_container:hover a span.tooltips {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.2s;
}

<div id="Tooltip_Text_container">
  <span><b>Tooltip headline</b></span>
  <a href="#">
    <span class="tooltips">
        <b>This is&nbsp;</b> a tooltip<br/>
        <b>This is&nbsp;</b> another tooltip<br/>
    </span>
  </a>
  <br/>Move the mousepointer to the tooltip headline above. 
</div>

Le premier intervalle est pour le texte affiché, le second intervalle pour le texte masqué, qui est affiché lorsque vous passez la souris dessus.

Pour développer la réponse de @Andrew Whitaker ci-dessus, vous pouvez convertir votre info-bulle en entités html dans la balise de titre afin d'éviter de mettre du html brut directement dans vos attributs:

$('div').tooltip({
    content: function () {
        return $(this).prop('title');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="tooltip" title="&lt;div&gt;check out these kool &lt;i&gt;italics&lt;/i&gt; and this &lt;span style=&quot;color:red&quot;&gt;red text&lt;/span&gt;&lt;/div&gt;">Hover Here</div>

Plus souvent qu'autrement, l'info-bulle est stockée dans une variable php de toute façon, vous n'avez donc besoin que de:

<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>

Pour éviter de placer des balises HTML dans l'attribut title, une autre solution consiste à utiliser le démarquage. Par exemple, vous pouvez utiliser [br] pour représenter un saut de ligne, puis effectuer un simple remplacement dans la fonction de contenu.

Dans l'attribut title:

"Sample Line 1[br][br]Sample Line 2"

Dans votre fonction de contenu :

content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}

$(function () {
         $.widget("ui.tooltip", $.ui.tooltip, {
             options: {
                 content: function () {
                     return $(this).prop('title');
                 }
             }
         });

         $('[rel=tooltip]').tooltip({
             position: {
                 my: "center bottom-20",
                 at: "center top",
                 using: function (position, feedback) {
                     $(this).css(position);
                     $("<div>")
                         .addClass("arrow")
                         .addClass(feedback.vertical)
                         .addClass(feedback.horizontal)
                         .appendTo(this);
                 }
             }
         });
     });

merci pour le message et la solution ci-dessus.

J'ai mis à jour un peu le code. J'espère que cela pourrait vous aider.

http://jsfiddle.net/pragneshkaria/Qv6L2/49/

Tant que nous utilisons jQuery (> v1.8), nous pouvons analyser la chaîne entrante avec $ .parseHTML ().

$('.tooltip').tooltip({
    content: function () {
        var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
        return tooltipContent;
    },
}); 

Nous analyserons l'attribut de la chaîne entrante pour les choses désagréables, puis le reconvertirons en HTML lisible par jQuery. La beauté de ceci est qu'au moment où il frappe l'analyseur, les chaînes sont déjà concaténées, donc peu importe si quelqu'un essaie de diviser la balise de script en chaînes distinctes. Si vous êtes bloqué en utilisant les info-bulles de jQuery, cela semble être une solution solide.

Sur http://bugs.jqueryui.com/ticket/9019

Mettre du HTML dans l'attribut title n'est pas du HTML valide et nous l'échappons maintenant pour éviter les vulnérabilités XSS (voir # 8861 ).

Si vous avez besoin de HTML dans vos info-bulles, utilisez l'option de contenu - http://api.jqueryui.com/tooltip/#option-content .

Essayez d'utiliser javascript pour définir des infobulles html, voir ci-dessous

$( ".selector" ).tooltip({
   content: "Here is your HTML"
});

Vous pouvez modifier le code source 'jquery-ui.js', trouver cette fonction par défaut pour récupérer le contenu de l'attribut title de l'élément cible.

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

changez-le en

var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
    content: function() {
        // support: IE<9, Opera in jQuery <1.7
        // .text() can't accept undefined, so coerce to a string
        if($(this).attr('ignoreHtml')==='false'){
            return $(this).prop("title");
        }
        var title = $( this ).attr( "title" ) || "";
        // Escape title, since we're going from an attribute to raw HTML
        return $( "<a>" ).text( title ).html();
    },

ainsi chaque fois que vous voulez afficher des astuces html, ajoutez simplement un attribut ignoreHtml = 'false' sur votre élément html cible; comme ça <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

une autre solution sera de saisir le texte à l'intérieur de la titlebalise, puis d'utiliser la .html()méthode de jQuery pour construire le contenu de l'info-bulle.

$(function() {
  $(document).tooltip({
    position: {
      using: function(position, feedback) {
        $(this).css(position);
        var txt = $(this).text();
        $(this).html(txt);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });
});

Exemple: http://jsfiddle.net/hamzeen/0qwxfgjo/

Aucune des solutions ci-dessus n'a fonctionné pour moi. Celui-ci fonctionne pour moi:

$(document).ready(function()
{
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]',
        html: true
     });
});

Balisage HTML

Contrôle de l'info-bulle avec la classe ".why" et Zone de contenu de l'info-bulle avec la classe ".customTolltip"

$(function () {
                $('.why').attr('title', function () {
                    return $(this).next('.customTolltip').remove().html();
                });
                $(document).tooltip();
            });

Remplacer le \nou l'échappé <br/>fait l'affaire tout en gardant le reste du HTML échappé:

$(document).tooltip({
    content: function() {
        var title = $(this).attr("title") || "";
        return $("<a>").text(title).html().replace(/&lt;br *\/?&gt;/, "<br/>");
    },
});

ajouter html = true aux options de l'info-bulle

$({selector}).tooltip({html: true});

La mise à jour
n'est pas pertinente pour la propriété de l'infobulle de l'interface utilisateur jQuery - c'est vrai dans l'infobulle de l'interface utilisateur de démarrage - c'est dommage!