L'info-bulle de l'interface utilisateur Jquery ne prend pas en charge le contenu HTML.

Question

Aujourd'hui, j'ai mis à jour tous mes jQuery plug-in jQuery 1.9.1. Et j'ai commencé à utiliser jQueryUI tooltip avec jquery.l'interface utilisateur.1.10.2. Tout était bon. Mais quand j'ai utilisé les balises HTML dans le contenu (en l' title attribut de l'élément I est l'application de l'info-bulle), j'ai remarqué que le HTML n'est pas pris en charge.

C'est la capture d'écran de mon info-bulle:

Comment puis-je faire du contenu HTML de travail avec jQueryUI info-bulle dans 1.10.2?

Answer 1

Edit: Depuis ce qui s'est avéré être une réponse, je suis en ajoutant la clause d'exclusion de responsabilité @écraser mentionné dans un commentaire ci-dessous. Si vous utilisez cette solution de contournement, sachez que vous êtes vous-même ouverture pour une vulnérabilité XSS. Seule l'utilisation de cette solution si vous savez ce que vous faites et peut-être certains de le HTML contenu dans l'attribut.

---

La façon la plus simple de le faire est de fournir une fonction à l' content option 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 info-bulle avec votre propre qui change de l' content option:

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

Maintenant, chaque fois que vous appelez .tooltip, un contenu HTML ne sera retourné.

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

Answer 2

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");
    },
});
 

Answer 3

Je l'ai résolu avec une balise de données personnalisée, car un attribut title est quand même 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 cela, il est conforme au code HTML et les infobulles ne sont affichées que pour les balises recherchées.

Answer 4

 $(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 post et solution ci-dessus.

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

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

Answer 5

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

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

Mettre à jour
ce n'est pas pertinent pour la propriété tooltip de jQuery ui - c'est vrai dans les info-bulles bootsrap ui - my bad!