क्या मैं ट्विटर बूटस्ट्रैप के टूलटिप के साथ जटिल HTML का उपयोग कर सकता हूं?

Question

अगर मैं आधिकारिक दस्तावेज की जाँच करूँ , तो मुझे HTML नामक एक संपत्ति दिखाई दे सकती है:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

यह कहता है, "टूलटिप में html डालें", लेकिन प्रकार बूलियन है। मैं टूलटिप के अंदर जटिल html का उपयोग कैसे कर सकता हूं?

Answer 1

यह पैरामीटर केवल इस बारे में है कि क्या आप टूलटिप में जटिल html का उपयोग करने जा रहे हैं। इसे सेट करें trueऔर फिर html को इसमें हिट करेंtitle टैग विशेषता ।

इस बेला देखें यहाँ - मैं के माध्यम से सही करने के लिए एचटीएमएल विशेषता निर्धारित किया है data-html="true"में <a>टैग और फिर बस एक उदाहरण के रूप एचटीएमएल तदर्थ में जोड़ा।

Comments

वैसे उनका प्रलेखन उस क्षेत्र पर इतना स्पष्ट नहीं है। इस उत्तर को साझा करने के लिए धन्यवाद! :)

— सर्जगर्ल

बूटस्ट्रैप दस्तावेज़ीकरण कुख्यात है :) मुझे खुशी है कि मैं चीजों को साफ कर सकता हूं!

— जॉर्ज विल्सन

फिडेल उदाहरण मेरे लिए काम नहीं करता है। मुझे अभी भी कच्चा HTML कोड दिखाई देता है।

— Sonson123

संभवतः बूटस्ट्रैप कोड में कुछ बदलाव जैसे आपको संदेह हो। इससे पहले कि मैं अपने सभी टूलटिप्स फ़ंक्शन विशेषताओं में {html: true} का उपयोग करके html शीर्षक के लिए वायर्ड हो गया, लेकिन 2.2.2> 2.3.1 से जा रहा था, मुझे अपने तत्वों में डेटा-html = "सही" जोड़ना पड़ा और बस स्क्रैप किया गया {html: सच} हिस्सा। मैं वास्तव में चाहता हूं कि वे पहली बार चीजों को सही तरीके से प्राप्त करने की कोशिश करें और रिलीज के बीच लगातार बदलावों को न तोड़ें।

— एंड्रयू स्विहर्ट

यहाँ देखें: jsfiddle.net/44khF/148 । इसके अलावा, यह केवल डेटा विशेषता के साथ काम करता है और html का उपयोग नहीं करता है: यदि आरोपियों का उपयोग किया जाता है, तो प्रारंभ में सच है।

— ptutt

Answer 2

बस के रूप में सामान्य, का उपयोग कर data-original-title:

एचटीएमएल:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

जावास्क्रिप्ट:

$("[rel=tooltip]").tooltip({html:true});

Html पैरामीटर निर्दिष्ट करता है कि टूलटिप पाठ को DOM तत्वों में कैसे बदलना चाहिए। डिफ़ॉल्ट रूप से Html कोड XSS हमलों को रोकने के लिए टूलटिप्स में बच जाता है। मान लें कि आप अपनी साइट पर एक उपयोगकर्ता नाम प्रदर्शित करते हैं और आप टूलटिप में एक छोटा सा जैव दिखाते हैं। यदि HTML कोड बच नहीं गया है और उपयोगकर्ता स्वयं जैव को संपादित कर सकते हैं तो वे दुर्भावनापूर्ण कोड को इंजेक्ट कर सकते हैं।

Comments

data-original-titletitleअगर बूटस्ट्रैप अस्थायी रूप से स्टोर है तो यह मौजूद है। data-titleयदि आपके पास कोई शीर्षक नहीं है, जैसे कि<a href="#" title="xxx">

— davidkonrad

यह बहुत अच्छा और सरल है

— गायन

नमस्कार @MattZeunert मैंने इसका उपयोग किया है और पूरी तरह से ठीक चल रहा है लेकिन मैं पृष्ठ को फिर से लोड किए बिना अपने आने वाले डेटा के अनुसार शीर्षक को अपडेट करना चाहता हूं और गतिशील रूप से सेट करता हूं, मेरा मतलब है कि शीर्षक के अंदर की सामग्री को बदलना।

— 3 नियम

Answer 3

HTML को डेटा-शीर्षक में सम्मिलित करने से बचने का एक और उपाय है टूलटिप HTML सामग्री के साथ स्वतंत्र div बनाना और अपने टूलटिप को बनाते समय इस div का संदर्भ देना:

<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>

<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
    <h2>Tip title</h2>
    <p>This is my tip content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
            $(this).tooltip(
            {
                html: true,
                title: $('#' + $(this).data('tip')).html()
            });
        });
    });
</script>

इस तरह आप जटिल पठनीय HTML सामग्री बना सकते हैं, और जितने चाहें उतने टूलटिप्स सक्रिय कर सकते हैं।

यहाँ पर लाइव डेमो कोडपेन है

Comments

बहुत खुबस। मुझे बहुत खुशी है कि किसी ने एक समाधान प्रस्तावित किया जो HTML को सीधे डेटा संपत्ति में शामिल नहीं कर रहा है।

— मीर

Answer 4

htmlडेटा विशेषता करता है यह वास्तव में क्या कहना है कि वह डॉक्स में करता है। इस छोटे से उदाहरण का प्रयास करें, कोई जावास्क्रिप्ट आवश्यक नहीं (स्पष्टीकरण के लिए लाइनों में टूट):

<span rel="tooltip" 
     data-toggle="tooltip" 
     data-html="true" 
     data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>

JSFiddle डेमो:

• बूटस्ट्रैप 2.x
• बूटस्ट्रैप 3.x

Answer 5

यदि आप html को टूलटिप में रखना चाहते हैं तो "html" विकल्प को सही पर सेट करें। वास्तविक HTML विकल्प "शीर्षक" द्वारा निर्धारित किया जाता है (लिंक का शीर्षक विशेषता सेट नहीं किया जाना चाहिए)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

लाइव नमूना