Jquery UI टूलटिप html सामग्री का समर्थन नहीं करता है

Question 1

आज, मैंने अपने सभी jQuery प्लग-इन को jQuery 1.9.1 के साथ अपग्रेड किया है। और मैंने jQuery.ui.1.10.2 के साथ jQueryUI टूलटिप का उपयोग करना शुरू कर दिया। सब कुछ ठीक था। लेकिन जब मैंने सामग्री में HTML टैग का उपयोग किया था ( titleतत्व की विशेषता में मैं टूलटिप को लागू कर रहा था), मैंने देखा कि HTML समर्थित नहीं है।

यह मेरे टूलटिप का स्क्रीनशॉट है:

यहाँ छवि विवरण दर्ज करें

मैं 1.10.2 में jQueryUI टूलटिप के साथ HTML सामग्री कैसे बना सकता हूं?

Question 2

संपादित करें : चूंकि यह एक लोकप्रिय उत्तर है, इसलिए मैं नीचे दिए गए टिप्पणी में @crush में उल्लिखित अस्वीकरण जोड़ रहा हूं । यदि आप इस कार्य का उपयोग करते हैं, तो ध्यान रखें कि आप अपने आप को XSS भेद्यता के लिए खोल रहे हैं । केवल इस समाधान का उपयोग करें यदि आप जानते हैं कि आप क्या कर रहे हैं और विशेषता में HTML सामग्री के कुछ निश्चित हो सकते हैं ।

ऐसा करने का सबसे आसान तरीका यह है contentकि आप उस फंक्शन को फंक्शन को सप्लाई करें जो डिफॉल्ट बिहेवियर को ओवरराइड करता है:

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

उदाहरण: http://jsfiddle.net/Aa5nK/12/

एक अन्य विकल्प यह होगा कि टूलटिप विजेट को ओवरराइड किया जाए जो contentविकल्प बदलता है :

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

अब, जब भी आप कॉल .tooltipकरेंगे, HTML सामग्री वापस आ जाएगी।

उदाहरण: http://jsfiddle.net/Aa5nK/14/

Question 3

इसके अलावा:

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

बेहतर प्रदर्शन के लिए इसका उपयोग करें

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

Question 4

मैंने इसे कस्टम डेटा टैग के साथ हल किया है, क्योंकि किसी भी शीर्षक विशेषता की आवश्यकता है।

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

जैसे यह html अनुरूप है और टूलटिप केवल वांछित टैग के लिए दिखाए जाते हैं।

Question 5

आप CSS शैलियों का उपयोग करके jQueryUI के बिना भी इसे पूरी तरह से प्राप्त कर सकते हैं। नीचे स्निपेट देखें:

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>

स्निपेट का विस्तार करें

पहला स्‍पष्‍ट प्रदर्शित पाठ के लिए होता है, दूसरा छिपे हुए पाठ के लिए होता है, जो आपके ऊपर मंडराने पर दिखाया जाता है।

Question 6

ऊपर दिए गए @Andrew Whitaker के उत्तर पर विस्तार करने के लिए, आप अपने टूलटिप को HTML संस्थाओं में शीर्षक टैग में बदल सकते हैं ताकि कच्चे html को सीधे अपनी विशेषताओं में डालने से बचें:

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

स्निपेट का विस्तार करें

अधिक बार नहीं, टूलटिप को php वैरिएबल में वैसे भी स्टोर किया जाता है ताकि आपको केवल आवश्यकता हो:

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

Question 7

शीर्षक विशेषता में HTML टैग रखने से बचने के लिए, एक और उपाय मार्कडाउन का उपयोग करना है। उदाहरण के लिए, आप एक लाइन ब्रेक का प्रतिनिधित्व करने के लिए [br] का उपयोग कर सकते हैं, फिर सामग्री फ़ंक्शन में एक साधारण प्रतिस्थापन कर सकते हैं।

शीर्षक विशेषता में:

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

आपकी सामग्री फ़ंक्शन में :

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

Question 8

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

पोस्ट और समाधान के लिए धन्यवाद।

मैंने कोड को थोड़ा अपडेट किया है। आशा है कि यह आपकी मदद कर सकता है।

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

Question 9

जब तक हम jQuery (> v1.8) का उपयोग कर रहे हैं, हम $ .parseHTML () के साथ आने वाली स्ट्रिंग को पार्स कर सकते हैं।

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

हम अप्रिय चीजों के लिए आने वाले स्ट्रिंग की विशेषता को पार्स करेंगे, फिर इसे jQuery- पठनीय HTML में बदल देंगे। इसकी सुंदरता यह है कि जब तक यह हिट करता है तब तक पार्सर के तार पहले से ही समतल होते हैं, इसलिए यह कोई फर्क नहीं पड़ता कि कोई स्क्रिप्ट टैग को अलग-अलग तारों में विभाजित करने की कोशिश कर रहा है। यदि आप jQuery के टूलटिप्स का उपयोग कर रहे हैं, तो यह एक ठोस समाधान प्रतीत होता है।

Question 10

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

HTML को शीर्षक विशेषता के भीतर रखना मान्य HTML नहीं है और हम अब इसे XSS भेद्यता को रोकने के लिए बच रहे हैं ( # 8861 देखें )।

यदि आपको अपने टूलटिप्स में HTML की आवश्यकता है तो सामग्री विकल्प का उपयोग करें - http://api.jqueryui.com/tooltip/#option-content ।

Html टूलटिप्स सेट करने के लिए जावास्क्रिप्ट का उपयोग करने का प्रयास करें, नीचे देखें

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

Question 11

आप स्रोत कोड 'jquery-ui.js' को संशोधित कर सकते हैं, लक्ष्य तत्व की शीर्षक विशेषता सामग्री को पुनः प्राप्त करने के लिए यह डिफ़ॉल्ट फ़ंक्शन ढूंढ सकते हैं।

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

इसे बदलो

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

इस प्रकार जब भी आप html युक्तियां प्रदर्शित करना चाहते हैं, तो अपने लक्ष्य html तत्व पर केवल एक विशेषता ignHtml = 'false' जोड़ें; इस तरह<td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>

Question 12

एक अन्य समाधान यह होगा कि टेक्स्ट को titleटैग के अंदर पकड़ा जाए और फिर .html()टूलिप की सामग्री के निर्माण के लिए jQuery की विधि का उपयोग किया जाए ।

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

उदाहरण: http://jsfiddle.net/hamzeen/0qwxfgjo/

Question 13

ऊपर दिए गए किसी भी समाधान ने मेरे लिए काम नहीं किया। यह एक मेरे लिए काम करता है:

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

Question 14

एचटीएमएल मार्कअप

क्लास ".why" के साथ टूल-टिप कंट्रोल, और क्लास के साथ टूल-टिप कंटेंट एरिया ".customTolltip"

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

Question 15

शेष HTML को बचाते हुए चाल को बदलना \nया भागना <br/>करता है:

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

Question 16

टूलटिप विकल्पों में html = सत्य जोड़ें

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

अपडेट
यह jQuery के ui टूलटिप संपत्ति के लिए प्रासंगिक नहीं है - यह बूटस्ट्रैप यूआई टूलटिप में सच है - मेरा बुरा!