আমি কি টুইটার বুটস্ট্র্যাপের টুলটিপ সহ জটিল এইচটিএমএল ব্যবহার করতে পারি?

Question

আমি যদি অফিসিয়াল ডকুমেন্টেশন পরীক্ষা করি তবে আমি এইচটিএমএল নামে একটি সম্পত্তি দেখতে পাচ্ছি:

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 প্রবেশ করান", তবে প্রকারটি বুলিয়ান। কীভাবে আমি একটি টুলটিপের অভ্যন্তরে জটিল এইচটিএমএল ব্যবহার করতে পারি?

Answer 1

এই প্যারামিটারটি আপনি টুলটিপে জটিল এইচটিএমএল ব্যবহার করতে যাচ্ছেন কিনা সে সম্পর্কে। এটিতে সেট করুন trueএবং তারপরে titleট্যাগটির বৈশিষ্ট্যে html টিপুন hit

এখানে এই ঝাঁকুনি দেখুন - আমি ট্যাগের data-html="true"মধ্যে এইচটিএমএল বৈশিষ্ট্যটিকে সত্যে সেট করে রেখেছি <a>এবং উদাহরণস্বরূপ এইচটিএমএল অ্যাডহকটিতে কেবল যুক্ত করেছি।

Comments

ওয়েল তাদের ডকুমেন্টেশন যে এলাকায় তাই পরিষ্কার নয়। এই উত্তর ভাগ করে নেওয়ার জন্য ধন্যবাদ! :)

— সার্গের্গ

বুটস্ট্র্যাপ ডকুমেন্টেশন কুখ্যাতভাবে আবর্জনা :) খুশি আমি জিনিস পরিষ্কার করতে পারলাম!

— জর্জ উইলসন

মজাদার উদাহরণটি আমার পক্ষে কাজ করে না। আমি এখনও কাঁচা এইচটিএমএল কোড দেখতে পাচ্ছি।

— সানসন 123

আপনার সন্দেহ মতো বুটস্ট্র্যাপ কোডে সম্ভবত কিছু পরিবর্তন হয়েছে। ফাংশন বৈশিষ্ট্যগুলিতে all এইচটিএমএল: সত্য using ব্যবহার করে আমার সমস্ত সরঞ্জামটিপগুলি এইচটিএমএল শিরোনামগুলির জন্য তারযুক্ত হওয়ার আগে, তবে ২.২.২> ২.৩.১ থেকে যাওয়ার আগে আমাকে আমার উপাদানগুলিতে ডেটা-এইচটিএমএল = "সত্য" যুক্ত করতে হয়েছিল এবং কেবল স্ক্র্যাপ করে ফেলেছিলাম {এইচটিএমএল: সত্য} অংশ। আমি সত্যিই চাই যে তারা প্রথমবার জিনিসগুলি আরও বেশিবার পাওয়ার চেষ্টা করবে এবং রিলিজের মধ্যে ক্রমাগত ব্রেকিং পরিবর্তন না ঘটায়।

— অ্যান্ড্রু সুইহার্ট

এখানে দেখুন: jsfiddle.net/44khF/148 । এছাড়াও, এটি কেবল ডেটা অ্যাট্রিবিউট এবং এইচটিএমএল ব্যবহার না করার সাথে কাজ করবে বলে মনে হয়: ডেলিগেটস ব্যবহার করা হয় তবে সূচনাতে সত্য।

— ptutt

Answer 2

সাধারণ হিসাবে, ব্যবহার করে data-original-title:

এইচটিএমএল:

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

javascript:

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

এইচটিএমএল প্যারামিটারটি উল্লেখ করে যে কীভাবে সরঞ্জামদ্বার পাঠ্যটি DOM উপাদানগুলিতে রূপান্তর করা উচিত। ডিফল্টরূপে এইচটিএমএল কোড এক্সএসএস আক্রমণগুলি রোধ করার জন্য সরঞ্জামদণ্ডগুলিতে পালিয়ে যায়। বলুন আপনি নিজের সাইটে একটি ব্যবহারকারীর নাম প্রদর্শন করেন এবং আপনি একটি সরঞ্জামদণ্ডে একটি ছোট বায়ো দেখান। যদি এইচটিএমএল কোডটি অব্যাহতি না পায় এবং ব্যবহারকারী বায়ো সম্পাদনা করতে পারে তারা দূষিত কোডটি ইনজেক্ট করতে পারে।

Comments

data-original-titletitleএটি উপস্থিত থাকলে বুটস্ট্র্যাপ অস্থায়ীভাবে সংরক্ষণ করে । data-title<a href="#" title="xxx">

— ডেভিডকনরড

এটি দুর্দান্ত এবং সাধারণ

— গায়ান

হ্যালো @ ম্যাটজেউনার্ট আমি এটি ব্যবহার করেছি এবং পুরোপুরি সূক্ষ্মভাবে চলছি তবে পৃষ্ঠাটি পুনরায় লোড না করে আমার আসন্ন ডেটা অনুসারে শিরোনামটি আপডেট করতে চাই এবং গতিশীলভাবে সেট করতে চাই, শিরোনামের ভিতরে থাকা সামগ্রীটি পরিবর্তন করতে চাই।

— 3 টি নিয়ম

Answer 3

ডেটা-শিরোনামে এইচটিএমএল প্রবেশ করা এড়াতে আরেকটি সমাধান হ'ল টুলটিপ এইচটিএমএল বিষয়বস্তু দিয়ে স্বতন্ত্র ডিভি তৈরি করা এবং আপনার টুলটিপটি তৈরি করার সময় এই ডিভটি দেখুন:

<!-- 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>

এইভাবে আপনি জটিল পাঠযোগ্য এইচটিএমএল সামগ্রী তৈরি করতে পারেন এবং আপনি যতগুলি টুলটিপস চান সক্রিয় করতে পারেন।

কোডেপেনে এখানে লাইভ ডেমো

Comments

ফ্যান্টাস্টিক। আমি খুব খুশী হয়েছি যে কেউ এমন একটি সমাধান প্রস্তাব করেছিলেন যা এইচটিএমএল সরাসরি ডেটা প্রোপার্টিটিতে ক্র্যামিং করে না।

— মীর

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>

জেএসফিডাল ডেমো:

• বুটস্ট্র্যাপ 2.x
• বুটস্ট্র্যাপ 3.x

Answer 5

"এইচটিএমএল" বিকল্পটি সত্যে সেট করুন যদি আপনি এইচটিএমএলকে টুলটিপে রাখতে চান। প্রকৃত এইচটিএমএল "শিরোনাম" বিকল্প দ্বারা নির্ধারিত হয় (লিঙ্কটির শিরোনামের বৈশিষ্ট্যটি সেট করা উচিত নয়)

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

লাইভ নমুনা