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


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

Bu benim araç ipucunun ekran görüntüsü:

enter image description here

HTML içeriğinin 1.10.2'de jQueryUI araç ipucu ile nasıl çalışabilirim?


76
2018-03-31 20:20


Menşei


Yeni sürüldüğünden beri bu sadece kırdı mı? Benim jQuery 1.9.1, jQuery UI 1.9.2 benim için iyi çalışıyor gibi görünüyor jsfiddle.net/2n3DL/1 - metadept
Hımm. İyi fikir. İzin verirsen bir soru daha sorabilir miyim? Tamam, bir araç ipucu simgesim var ve bunun gibi "tooltip" adında bir sınıf var: <img src = "images / info.png" class = "tooltip" title = "Bazı <b> harika </ b> HTML tooltip text! "> Böyle nasıl kullanabilirim? Saygılarımla. - Colin Henricks
metaquest'leri güncellendi jquery ui 1.10.2 ile güncellendi İşte ve jquery 1.9.1. Hala çalışıyor. - SachinGutte
@phobos: Hayır, değil. Var <b></b> etiketleri araç çubuğunda sağa. - Andrew Whitaker
"Bazı girişler" in üzerine gelin (HTML içeriğini doğrudan döndüren araç ipucu düzgün çalışır). OP'nin sorusunun bir tür belirsiz olduğunu biliyorum, ancak HTML'yi kullanarak title özniteliği, 1.10 itibariyle desteklenmiyor. - Andrew Whitaker


Cevaplar:


Düzenle: Bu popüler bir yanıt olduğu ortaya çıktığında, bu feragatnameyi ekliyorum @ezme Aşağıda bir yorumda belirtilen. Bu çalışmayı kullanırsanız, Kendinizi bir XSS güvenlik açığı için açtığınızı unutmayın. Bu çözümü sadece ne yaptığını biliyorum ve olabilir belli Nitelikteki HTML içeriğinin.


Bunu yapmanın en kolay yolu, content varsayılan davranışı geçersiz kılan seçenek:

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

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

Başka bir seçenek de, ipucu widget'ını kendi başınıza değiştirecek şekilde değiştirmektir. content seçeneği:

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

Şimdi, her aradığınızda .tooltip, HTML içeriği iade edilecektir.

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


171
2018-03-31 20:53



Özellikle, doğru yorumunuz için çok teşekkür ederim. - Colin Henricks
çok teşekkür ederim. - strongBAD
Bununla ilgili tek sorun, jQuery'nin baştaki özellikte HTML'den çıkmaya başlamasının sebebini atlatmasıdır. - crush
@crush bu sebep ne olabilir? Sadece kuşak için ... - eidylon
@eidylon Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities. Andrew'un cevabında, başlık hala geçersiz olan HTML içermelidir. - crush


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

$("[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ı sadece aranan etiketler için gösterilir.


12
2018-04-13 16:08



Mevcut başlık özelliğini kırmamak için +1. - Heinzi


Bunun yerine:

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

daha iyi performans için bunu kullanın

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

12
2018-05-20 04:13



Bu cevap kabul edilen kişi olmalı. - julien


Bunu, CSS stilleri kullanarak jQueryUI olmadan da tamamen elde edebilirsiniz. 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 açıklık, görüntülenen metinde, gizli metnin ikinci yayılma alanıdır.


4
2018-02-24 12:00





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

Başlık özniteliğinde:

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

Senin içinde içerik işlevi:

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

2
2018-04-17 23:41





Yukarıda Whitaker'ın yanıtını genişletmek için, ipucunuzu doğrudan html içeriğinize eklemekten kaçınmak için araç ipucunuzu başlık etiketi içindeki html öğelerine 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>

Daha sık olmamakla birlikte, araç ipucu bir php değişkeninde zaten saklanır;

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

2
2017-10-30 12:31





$(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 mesaj 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/


1
2017-08-06 12:16





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 tekrar jQuery-okunabilir HTML'ye dönüştürebiliriz. Bunun güzelliği, ayrıştırıcıya ulaştığı zaman, dizelerin zaten birleştirilmiş olduğu, bu yüzden birisinin komut dizisini ayrı dizelere bölmeye çalışıp çalışmadığı önemli değil. JQuery'nin araç ipuçlarını kullanarak sıkışmışsanız, bu sağlam bir çözüm gibi görünüyor.


1
2018-01-15 09:45





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

HTML'yi başlık niteliğine eklemek geçerli HTML değildir ve biz   şimdi XSS güvenlik açıklarını önlemek için kaçıyor (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"
});

1
2018-03-09 12:15





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

onu 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' özniteliği eklemeniz yeterlidir; bunun gibi <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>


1
2018-03-16 02:28





metnin içindeki metni kapmak için başka bir çözüm olacak title etiket ve sonra kullan .html() araç ipucu içeriğini oluşturmak için jQuery yöntemi.

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


1
2017-07-13 03:34