web-dev-qa-db-fra.com

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

Aujourd'hui, j'ai mis à niveau tous mes plug-in jQuery avec jQuery 1.9.1. Et j'ai commencé à utiliser l'infobulle jQueryUI avec jquery.ui.1.10.2. Tout était bon. Mais lorsque j'ai utilisé des balises HTML dans le contenu (dans l'attribut title de l'élément auquel j'ai appliqué l'info-bulle), j'ai constaté que HTML n'était pas pris en charge.

Ceci est une capture d'écran de mon infobulle:

enter image description here

Comment puis-je faire en sorte que le contenu HTML fonctionne avec l'infobulle jQueryUI dans 1.10.2?

jqueryhtmljquery-uijquery-ui-tooltip
82
user1372430

Edit : Comme cela s'est avéré être une réponse populaire, j'ajoute l'avertissement que @ crush mentionné dans un commentaire. au dessous de. Si vous utilisez ce travail, sachez que vous vous ouvrez à une vulnérabilité XSS . Utilisez cette solution uniquement si savez ce que vous faites et pouvez être certain du contenu HTML de l'attribut .

Le moyen le plus simple consiste à fournir une fonction à l'option content 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 par le vôtre qui modifie l'option content:

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

Maintenant, chaque fois que vous appelez .tooltip _, Le contenu HTML sera renvoyé.

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

176
Andrew Whitaker

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

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.

13
Chris

Vous pouvez également réaliser cela 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>

La première plage concerne le texte affiché, la seconde le texte masqué, qui s'affiche lorsque vous la survolez.

4
Matt

Pour éviter de placer des balises HTML dans l'attribut title, une autre solution consiste à utiliser markdown. 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 conten:

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

Pour approfondir 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 placer du code 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>

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

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

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 afin de détecter tout problème, puis nous le reconvertirons en HTML lisible par jQuery. La beauté de ceci est qu’au moment où il parvient à l’analyseur, les chaînes sont déjà concaténées; ainsi, peu importe si quelqu'un essaie de scinder la balise de script en plusieurs chaînes. Si vous êtes bloqué avec les info-bulles de jQuery, cela semble être une solution solide.

1
ghettosoak

une autre solution consiste à saisir le texte à l'intérieur de la balise title puis à utiliser la méthode .html() 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/

1
Hamzeen Hameem
$(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 un peu. J'espère que cela pourrait vous aider.

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

1
Pragnesh Karia

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

Mettre HTML dans l'attribut title n'est pas un 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 les info-bulles HTML (voir ci-dessous).

$( ".selector" ).tooltip({
   content: "Here is your HTML"
});
1
Hắc Huyền Minh

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 souhaitez afficher des conseils 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>

1
Joker

Balisage HTML

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

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