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


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

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

enter image description here

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


76
2018-03-31 20:20


मूल


क्या यह कुछ ऐसा है जो आपने अपग्रेड किए जाने के बाद ही तोड़ दिया? यह jQuery 1.9.1, jQuery यूआई 1.9.2 में मेरे लिए ठीक काम करता प्रतीत होता है jsfiddle.net/2n3DL/1 - metadept
हम्म। यह अच्छा विचार है। यदि आप मुझे देते हैं तो क्या मैं एक और सवाल पूछ सकता हूं। ठीक है, मेरे पास टूलटिप आइकन है और इसमें "टूलटिप" नामक एक क्लास है: <img src = "images / info.png" class = "tooltip" title = "कुछ <b> great </ b> HTML टूलटिप टेक्स्ट! "> मैं इस तरह कैसे उपयोग कर सकता हूं? सादर। - Colin Henricks
jquery ui 1.10.2 के साथ मेटाडेट्स अद्यतन पहेली देखें यहाँ और jquery 1.9.1। यह अभी भी काम करता है। - SachinGutte
@phobos: नहीं, यह नहीं करता है। वहां <b></b> टूलटिप में सही टैग। - Andrew Whitaker
"कुछ इनपुट" पर होवर करें (सीधे HTML सामग्री लौटने वाला टूलटिप ठीक काम करता है)। मुझे पता है कि ओपी का सवाल अस्पष्ट है, लेकिन मुझे लगता है कि वह एचटीएमएल का उपयोग कर रहा है title विशेषता, जो 1.10 के रूप में असमर्थित है। - Andrew Whitaker


जवाब:


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


ऐसा करने का सबसे आसान तरीका है कि एक समारोह की आपूर्ति करें 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, एचटीएमएल सामग्री वापस कर दिया जाएगा।

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


171
2018-03-31 20:53



विशेष रूप से, आपकी सही टिप्पणी के लिए बहुत बहुत धन्यवाद। - Colin Henricks
आपका बहुत बहुत धन्यवाद। - strongBAD
इसके साथ एकमात्र समस्या यह है कि यह बहुत ही कारण बताता है कि jQuery ने शीर्षक विशेषता में एचटीएमएल से बचने शुरू कर दिया। - crush
@ क्रश क्या कारण होगा? सिर्फ जन्म के लिए ... - eidylon
@eidylon Putting HTML within the title attribute is not valid HTML and we are now escaping it to prevent XSS vulnerabilities। एंड्रयू के जवाब में, शीर्षक में अभी भी HTML होना है, जो अमान्य है। - crush


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

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

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


12
2018-04-13 16:08



मौजूदा शीर्षक विशेषता को तोड़ने के लिए +1। - Heinzi


इसके अलावा:

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

बेहतर प्रदर्शन के लिए इसका इस्तेमाल करें

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

12
2018-05-20 04:13



यह उत्तर स्वीकार किया जाना चाहिए। - julien


आप सीएसएस शैलियों का उपयोग करके 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>

पहला स्पैन प्रदर्शित टेक्स्ट के लिए है, छुपा पाठ के लिए दूसरा अवधि, जो दिखाया गया है जब आप इसे ओवरवर करते हैं।


4
2018-02-24 12:00





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

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

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

आपके में सामग्री समारोह:

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

2
2018-04-17 23:41





उपरोक्त एंड्रयू व्हिटकर के उत्तर पर विस्तार करने के लिए, आप अपने टूलटिप को शीर्षक टैग के भीतर एचटीएमएल इकाइयों में परिवर्तित कर सकते हैं ताकि कच्चे एचटीएमएल को सीधे अपने गुणों में डालने से बचें:

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

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

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

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

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


1
2017-08-06 12:16





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

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

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


1
2018-01-15 09:45