Jquery UI araç ipucu html içeriğini desteklemiyor

Bugün, tüm jQuery eklentilerimi jQuery 1.9.1 ile yükselttim. Ve jQueryUI araç ipucunu jquery.ui.1.10.2 ile kullanmaya başladım. Her şey iyiydi. Ancak içerikte HTML etiketleri kullandığımda ( titleipucunu uyguladığım öğenin özniteliğinde) HTML'nin desteklenmediğini fark ettim.

Bu, ipucumun ekran görüntüsü:

1.10.2'de HTML içeriğinin jQueryUI araç ipucuyla çalışmasını nasıl sağlayabilirim?

Düzenleme : Bunun popüler bir cevap olduğu ortaya çıktığından, @ ezmenin aşağıdaki yorumda bahsettiği sorumluluk reddi beyanını ekliyorum . Bu geçici çözümü kullanırsanız, kendinizi bir XSS güvenlik açığına açtığınızın farkında olun . Eğer varsa yalnızca bu çözümü kullanmak ne yaptığınızı biliyor ve olabilir belirli özelliğindeki HTML içeriği.

Bunu yapmanın en kolay yolu content, varsayılan davranışı geçersiz kılan seçeneğe bir işlev sağlamaktır :

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

Örnek: http://jsfiddle.net/Aa5nK/12/

Diğer bir seçenek de, araç ipucu widget'ını, contentseçeneği değiştiren kendi aracınızla geçersiz kılmak olabilir :

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

Şimdi, her aradığınızda .tooltip, HTML içeriği geri dönecektir.

Örnek: http://jsfiddle.net/Aa5nK/14/

Bunun yerine:

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

bunu daha iyi performans için kullan

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

Bunu özel bir veri etiketiyle çözdüm, çünkü zaten bir başlık özelliği gerekiyor.

$("[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");
    }
});

Bunun gibi html uyumludur ve araç ipuçları yalnızca istenen etiketler için gösterilir.

CSS stillerini kullanarak bunu tamamen jQueryUI olmadan da gerçekleştirebilirsiniz. Aşağıdaki snippet'e bakın:

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>

İlk aralık, görüntülenen metin içindir, ikinci aralık, üzerine geldiğinizde gösterilen gizli metin içindir.

@Andrew Whitaker'ın yukarıdaki yanıtını genişletmek için, ham html'yi doğrudan özniteliklerinize eklemekten kaçınmak için araç ipucunuzu başlık etiketi içindeki html varlıklarına dönüştürebilirsiniz:

$('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>

Çoğu zaman, araç ipucu yine de bir php değişkeninde saklanır, bu nedenle yalnızca şunlara ihtiyacınız olur:

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

HTML etiketlerini başlık özniteliğine yerleştirmekten kaçınmak için başka bir çözüm de markdown kullanmaktır. Örneğin, bir satır sonunu temsil etmek için [br] kullanabilir, ardından içerik işlevinde basit bir değişiklik yapabilirsiniz.

Başlık özelliğinde:

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

Senin içinde içerik fonksiyonu :

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

Yukarıdaki gönderi ve çözüm için teşekkürler.

Kodu biraz güncelledim. Umarım bu size yardımcı olabilir.

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

JQuery (> v1.8) kullandığımız sürece, gelen dizeyi $ .parseHTML () ile ayrıştırabiliriz.

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

Hoş olmayan şeyler için gelen dizenin özniteliğini ayrıştıracağız, sonra onu jQuery tarafından okunabilir HTML'ye dönüştüreceğiz. Bunun güzelliği, ayrıştırıcıya ulaştığında dizelerin zaten birleştirilmesidir, bu nedenle birinin komut dosyası etiketini ayrı dizelere bölmeye çalışmasının önemi yoktur. JQuery'nin araç ipuçlarını kullanırken takıldıysanız, bu sağlam bir çözüm gibi görünüyor.

Gönderen http://bugs.jqueryui.com/ticket/9019

HTML'yi title özniteliğine koymak geçerli HTML değildir ve şimdi XSS güvenlik açıklarını önlemek için ondan kaçıyoruz (bkz. # 8861 ).

Araç ipuçlarınızda HTML'ye ihtiyacınız varsa, içerik seçeneğini kullanın - http://api.jqueryui.com/tooltip/#option-content .

HTML araç ipuçlarını ayarlamak için javascript kullanmayı deneyin, aşağıya bakın

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

'Jquery-ui.js' kaynak kodunu değiştirebilir, hedef öğenin başlık öznitelik içeriğini almak için bu varsayılan işlevi bulabilirsiniz.

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

şuna değiştir

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

bu nedenle, html ipuçlarını görüntülemek istediğinizde, hedef html öğenize bir ignoreHtml = 'false' niteliği eklemeniz yeterlidir; bunun gibi <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

başka bir çözüm de titleetiketin içindeki metni almak ve ardından .html()araç ipucunun içeriğini oluşturmak için jQuery yöntemini kullanmak olacaktır.

$(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);
      }
    }
  });
});

Örnek: http://jsfiddle.net/hamzeen/0qwxfgjo/

Yukarıdaki çözümlerin hiçbiri benim için işe yaramadı. Bu benim için çalışıyor:

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

Html İşaretlemesi

".Why" sınıfıyla Araç İpucu Kontrolü ve ".customTolltip" sınıfıyla Araç İpucu İçerik Alanı

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

\nVeya çıkış karakterini değiştirmek, <br/>HTML'nin geri kalanını kaçmış halde tutarken hile yapar:

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

ipucu seçeneklerine html = true ekleyin

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

Güncelle
jQuery ui tooltip özelliği ile alakalı değil - bootstrap ui tooltip'te doğru - benim hatam!