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

tarafından oluşturulan soru Wed, Jul 3, 2013 12:00 AM

Bugün, tüm jQuery eklentilerimi jQuery 1.9.1 ile 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 (öğenin title özelliğinde araç ipucunu uyguladım), HTML'nin desteklenmediğini fark ettim.

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

resim tanımını buraya girin

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

    
79
  1. Bu, siz yükselttiğinizden bu yana yeni başlayan bir şey mi? JQuery 1.9.1, jQuery UI 1.9.2'de benim için iyi çalışıyor gibi görünüyor. jsfiddle.net/2n3DL/1
    2013-03-31 20: 35: 01Z
  2. Hımm.It iyi bir fikir. İzin verirseniz bir soru daha sorabilir miyim? Tamam, bir araç ipucu simgesim var ve şöyle bir "araç ipucu" olarak adlandırılan bir sınıfa sahip: < img src = "images /info.png" class = "tooltip" title = "Bazı < b > great < /b &gt ; HTML araç ipucu metni! "&Gt; Böyle nasıl kullanabilirim? Saygılarımla.
    2013-03-31 20: 52: 15Z
  3. , jquery ui 1.10.2 ile güncellenen metanet kavramlarını görün. burada ve jquery 1.9.1. Hala çalışıyor.
    2013-03-31 20: 53: 01Z
  4. @ phobos: Hayır, yok. Araç ipucunda tam <b></b> etiket vardır.
    2013-03-31 20: 53: 58Z
  5. "Bazı girdilerin" üzerine gelin (HTML içeriğini doğrudan döndüren araç ipucu düzgün çalışır). OP'nin sorusunun net olmadığını biliyorum, ancak title özelliğinde, 1.10'dan itibaren desteklenmeyen bir HTML kullandığını farz ediyorum.
    2013-03-31 20: 56: 11Z
13 Yanıtlar                              13                         

Düzenle : Bu popüler bir cevap olduğu ortaya çıktığından, @ crush . Bu çalışmayı kullanırsanız, kendiniz için açıldığınızı unutmayın XSS güvenlik açığı . Bu çözümü yalnızca ne yaptığınızı biliyorsanız biliyorsanız ve özellikteki HTML içeriğinden emin olabilirseniz


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

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

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

Başka bir seçenek de, content seçeneğini değiştiren kendinize ait bir araç ipucu küçük aracını geçersiz kılmak olacaktır:

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

Şimdi, .tooltip’u her aradığınızda, HTML içeriği döndürülecek.

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

    
174
2017-05-23 12: 18: 13Z
  1. Özellikle, doğru yorumunuz için çok teşekkür ederiz.
    2013-04-01 15: 20: 21Z
  2. çok teşekkür ederim.
    2013-05-27 08: 36: 18Z
  3. Bununla ilgili tek sorun, jQuery'nin başlık özniteliğinde HTML'den kaçmaya başlamasının nedenini ortadan kaldırmasıdır.
    2013-07-22 21: 18: 11Z
  4. @ crush bu sebep ne olurdu? Sadece gelecek için ...
    2013-10-24 19: 23: 08Z
  5. @ 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’yi içermelidir.
    2013-10-24 20: 05: 19Z

Bunun yerine:

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

bunu daha iyi performans için kullanın

 
$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});
    
16
2014-05-20 07: 02: 26Z
  1. Bu cevap kabul edilebilir olmalı.
    2014-10-22 16: 20: 09Z
  2. evet, daha iyi performans, çünkü sadece araç ipuçlarıyla birkaç öğem var
    2018-09-29 20: 51: 38Z
  3. Mükemmel çalışıyor
    2019-04-11 14: 36: 25Z

Özel bir veri etiketiyle çözdüm, çünkü yine de bir başlık niteliği 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 uygundur ve ipuçları yalnızca istenen etiketler için gösterilir.

    
13
2014-04-13 16: 08: 32Z
  1. + 1, mevcut başlık özelliğini bozmadığı için.
    2014-09-01 12: 23: 34Z

Bunu, CSS stillerini kullanarak jQueryUI olmadan da tamamen başarabilirsiniz. Aşağıdaki kod parçasına 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 metin, üzerine geldiğinizde gösterilen gizli metindir.

    
4
2018-05-02 07: 49: 11Z

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

Başlık niteliğinde:

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

İçerik işlevinizde :

 
content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}
    
2
2015-04-17 23: 41: 56Z

@Andrew Whitaker'ın cevabını genişletmek için, ham html'yi doğrudan özniteliklerinize koymaktan kaçınmak için araç ipucunuzu başlık etiketindeki 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 ihtiyacınız olacak:

 
<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>
    
2
2015-11-05 01: 44: 18Z
 
$(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ür ederiz.

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

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

    
1
2013-08-16 08: 49: 51Z

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

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

Gelen dizginin hoş olmayan şeyler için özniteliğini ayrıştırırız, sonra onu tekrar jQuery tarafından okunabilen HTML'ye dönüştürürüz. Bunun güzelliği, ayrıştırıcıya çarptığı zaman dizelerin zaten bir araya gelmesidir, bu nedenle birinin komut dosyası etiketini ayrı dizgelere bölmeye çalışmasının bir önemi yoktur. Eğer jQuery'nin ipuçlarını kullanıyorsanız, bunun sağlam bir çözüm olduğu görülüyor.

    
1
2015-01-15 09: 45: 05Z

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

adresinden
  

HTML’yi başlık niteliğine koymak geçerli bir HTML değildir ve biz   şimdi XSS 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 . /p>

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

 
$( ".selector" ).tooltip({
   content: "Here is your HTML"
});
    
1
2015-03-09 12: 15: 06Z

'jquery-ui.js' kaynak kodunu değiştirebilir, hedef öğenin başlık niteliği 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();
    },

olarak 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, sadece hedef html öğenize ignoreHtml = 'false' niteliğini ekleyin; bunun gibi <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

    
1
2016-03-16 02: 28: 32Z

başka bir çözüm, title etiketinin içindeki metni kapmak olacaktır & sonra araç ipucunun içeriğini oluşturmak için .html() jQuery yöntemini kullanın.

 
$(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
2016-07-13 03: 34: 53Z

Html İşaretlemesi

".why" sınıfına sahip araç ipucu kontrolü ve ".customTolltip" sınıfına sahip araç ucu İçerik Alanı

 
$(function () {
                $('.why').attr('title', function () {
                    return $(this).next('.customTolltip').remove().html();
                });
                $(document).tooltip();
            });
    
0
2019-03-11 11: 00: 51Z

add html = araç ipucu seçeneklerine sadık

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

Güncelleme

jQuery ui araç ipucu özelliği ile alakalı değildir - açılış önyüklemesi kullanıcı araç ipucunda doğrudur - benim hatam!

    
- 1
2015-03-30 20: 30: 31Z
  1. Üzgünüm, bu benim için işe yaramadı. Resmi belgelerde "html" seçeneğinden de bahsedilmiyor.
    2013-11-22 00: 31: 55Z
  2. Bu bootstrap 2.3 araç ipucu için değil jquery-ui araç ipucu değil
    2014-02-04 21: 57: 18Z
  3. araç ipucu için "html" pervanesi yok
    2014-02-28 08: 54: 29Z
  4. Güncellemeniz için + 1 :)
    2014-04-20 07: 54: 35Z
kaynak yerleştirildi İşte
Diğer sorular