এইচটিএমএল টুলটিপে আমি কীভাবে গাড়ীর রিটার্ন ব্যবহার করতে পারি?


330

আমি বর্তমানে আমাদের সাইটে ভার্বোজ টুলটিপস যুক্ত করছি এবং আমি চাইছি (কোনও হুইজ-ব্যাং জিকুয়েরি প্লাগইন অবলম্বন না করেই, আমি জানি যে অনেকগুলি আছে!) টুলটিপ ফর্ম্যাট করতে গাড়ীর রিটার্ন ব্যবহার করতে।

টিপ যোগ করতে আমি titleগুণটি ব্যবহার করছি । আমি সাধারণ সাইটগুলির আশেপাশে এবং এর প্রাথমিক টেম্পলেটটি ব্যবহার করেছি:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

আমি এর ?সাথে প্রতিস্থাপন করার চেষ্টা করেছি :

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (আমি সি # ব্যবহার করছি)

উপরের কোনটিই কাজ করে না। এটা কি সম্ভব?


এটি বেশ কৌতূহলোদ্দীপক, তবে এটির কার্যকারিতাও থাকতে পারে। আপনার শিরোনামের সমস্ত শূন্যস্থানটি অ-ব্রেকিং স্পেসে পরিবর্তন করুন &nbsp;। তারপরে স্পেস রাখুন যেখানে আপনি লাইন ব্রেকটি চান। &nbsp;আপনার স্থান (লাইন বিরতি) এর আগে আপনাকে একগুচ্ছ অক্ষর যুক্ত করতে হবে ।
jumxozizi

উত্তর:


292

এটা খুব সহজ আপনি নিজেকে লাথি ... শুধু এন্টার টিপুন!

<a title='Tool
Tip
On
New
Line'>link with tip</a>

ফায়ারফক্স যদিও মাল্টি-লাইন টুলটিপগুলি মোটেও প্রদর্শন করবে না - এটি কিছুই না করে নতুন লাইনের প্রতিস্থাপন করবে।


69
এই উত্তরটি পুরানো, ফায়ারফক্স করে (আমি v25 ব্যবহার করছি) এখন শিরোনামে প্রদর্শন নতুন লাইন। এটি সাথে কাজ করে \n, \u000Aএবং \x0A
হালসিওন

1
@ হ্যালসিওন, কেবল অন্য পাঠকদের জন্য স্পষ্ট করতে, উপরের তিনটি কোড এইচটিএমএল বলে মনে হচ্ছে না। এগুলিকে দেখতে সি-উত্সযুক্ত ভাষার স্ট্রিং এস্কেপ সিকোয়েন্সগুলির মতো দেখায়।
স্যাম

3
@ স্যাম আমি বুঝতে পারছি না এর দ্বারা আপনি কী বোঝাতে চাইছেন। \x0A(বাইট) হ'ল অক্ষর-কোড যা একটি নতুন লাইনের সাথে সম্পর্কিত correspond \u000A(ইউনিকোড) এর জন্য একই । \nএছাড়াও নতুন লাইন।
হালসিওন

13
@ হ্যালসিওন, আমি titleফায়ারফক্স এবং ক্রোমের একটি বৈশিষ্ট্যে এই পালানোর ক্রমগুলি সন্নিবেশ করানোর চেষ্টা করেছি এবং সেগুলি কেবলমাত্র সরঞ্জামদণ্ডে আক্ষরিকভাবে উপস্থাপিত হয়েছিল। এরপরে, আমি বুঝতে পেরেছিলাম যে আপনি সম্ভবত কোন বাক্যটি ব্যবহার করতে হবে (অক্ষরগুলি অব্যাহতি নয়) কোন যোগাযোগের উপায় হিসাবে সেই বাক্য গঠনটি ব্যবহার করেছিলেন। আমার মন্তব্যটি হ'ল অন্য লোকদের সময় বাঁচানোর জন্য তাদের সতর্ক করে দিয়ে যাতে তাদের পালানোর অনুক্রমগুলি তাদের এইচটিএমএল এ না রাখার চেষ্টা করে যাতে তারা আমার মতো সময় নষ্ট না করে।
স্যাম

4
@ তারকুইন তারা এইচটিএমএল এ কাজ করে না, তারা কেবল বিশেষত পিএইচপি এর ডাবল উক্তিগুলিতে কাজ করে কারণ এটি পিএইচপি এর ডাবল উক্তিগুলির একটি বৈশিষ্ট্য।
ব্রিলিয়ান্ড

307

সর্বশেষ স্পেসিফিকেশন লাইন ফিড চরিত্র পারবেন, তাই অ্যাট্রিবিউট বা সত্তার ভিতরে একটি সহজ লাইন বিরতি &#10;(নোট যে অক্ষর #এবং ;প্রয়োজন হয়) ঠিক আছ।


4
এটি ক্রোম দ্বারা সমর্থিত নয় তবে ফায়ারফক্সের জন্য জরিমানা!
অ্যালেডাইন

5
আমি উভয় চেষ্টা করেছিলাম &#10;এবং &#13;&#13;ক্রোম সংস্করণ 50.0.2661.94 (-৪-বিট) সংস্করণে "লাইন ব্রেক" ইচ্ছুক হবে না। &#10;ক্রোম, ফায়ারফক্স এবং অপেরা (64৪-বিট উবুন্টুর জন্য সমস্ত) এবং ইন্টারনেট এক্সপ্লোরার সংস্করণ ১১.০ এবং উইন্ডোতে কিছু পরিবর্তন করার বর্তমান সংস্করণগুলিতে ভাল কাজ করছে।
তাস

এটি আমার জন্য বিশেষভাবে দরকারী কারণ আমি ওয়ার্ডপ্রেস পোস্ট সম্পাদকটিতে এটি করার চেষ্টা করছিলাম।
ed1nh0

13
& # 10; আইই, ফায়ারফক্স এবং ক্রোমে সুন্দর করে কাজ করে। ধন্যবাদ!
ড্যানিয়েল

ক্রোমের জন্য & # 013; ....... উদাহরণ: শিরোনাম = "শিরোনাম 1 & # 13; শিরোনাম 2 & # 13; শিরোনাম 3"
মালিক জাহিদ

75

দশম অক্ষর চেষ্টা করুন এটি যদিও ফায়ারফক্সে কাজ করবে না। :(

পাঠ্যটি ব্রাউজার নির্ভর পদ্ধতিতে প্রদর্শিত হয় (যদি হয় তবে)। ছোট ছোট সরঞ্জামগুলি বেশিরভাগ ব্রাউজারে কাজ করে। আইই এবং সাফারিতে লম্বা টুলটিপস এবং লাইন ব্রেকিংয়ের কাজ (ব্যবহার করুন &#10;বা &#13;একটি নতুন নতুন লাইনের জন্য)। ফায়ারফক্স এবং অপেরা নতুন লাইন সমর্থন করে না। ফায়ারফক্স দীর্ঘ টুলটিপস সমর্থন করে না।

http://modp.com/wiki/htmltitletooltips

হালনাগাদ:

জানুয়ারী ২০১৫ পর্যন্ত ফায়ারফক্স &#13;একটি এইচটিএমএল titleবৈশিষ্ট্যে লাইন বিরতি sertোকাতে সমর্থন করে । নীচে স্নিপেট উদাহরণ দেখুন।

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>


2
+1 টি। আপনি যদি কোনও jQuery প্লাগইন ব্যবহার করার সিদ্ধান্ত নেন, সর্বোত্তম অ্যাক্সেসিবিলিটির জন্য এটি শিরোনামের গুণাবলী থেকে এর বিষয়বস্তুটি পড়তে হবে এবং রানটাইমের সময় একটি লাইন-ব্রেকের জন্য কিছু স্বেচ্ছাচারী অদৃশ্য চরিত্রের বিকল্প তৈরি করা উচিত।
কেন্ট ফ্রেড্রিক

+1 টি। আকর্ষণীয় জিনিস। কিছু সংযুক্ত আরব আমিরাত শিরোনামটি ছাঁটাইয়ের পরে ছাঁটাই করার বিষয়টি এখনও রয়েছে - এফএফ 2 আমার স্মরণে যেমন রয়েছে তবে এটি আজকের দিনগুলির কোনও ইস্যুতে কম।
রোবরউর্ক

3
জানুয়ারী ২০১৫ পর্যন্ত ফায়ারফক্স একটি লাইন বিরতি sertোকাতে &#13;একটি titleঅ্যাট্রিবিউট ব্যবহার করে সমর্থন করে ।
সিউডোস্যাভ্যান্ট

আইভি 11 এ এসভিজি উপাদানটিতে কাজ করার জন্য আমি লাইন ব্রেক পেতে পারি না <title>। কারও বেশি সাফল্য আছে কি? উপরের / নীচে বর্ণিত চার্ট কোডগুলি চেষ্টা করে দেখেছি কেউই কাজ করে না।
রিমেম্বার

64

আইই, ক্রোম, সাফারি, ফায়ারফক্স (সর্বশেষ সংস্করণ 2012-11-27) এ এটি পরীক্ষিত:
&#13;

তাদের সবকটিতে কাজ করে ...


প্রথম পদ্ধতি (কোডে লাইন ভাঙা) সহজ মনে হলেও অটো-ফর্ম্যাটারে জেএস-কোড প্রোগ্রামগুলিতে দাঁড়ায় না।
হরিয়াতু

প্ল্যাটফর্মগুলি জুড়ে @ ক্যামিলো মার্টিন, নিউলাইন এবং লাইনফিড একই রকম। &#10;উইন্ডোজ লাইনফিডের মতোই ইউনিক্স লাইনফিড। একইভাবে, &#13;উভয় প্ল্যাটফর্মের জন্য নতুন লাইন। বৈশিষ্ট নির্দিষ্ট করে লাইনফীড (এলএফ) গৃহস্থালির কাজ অবশ্যই যা &#10;উভয় (সমস্ত?) প্ল্যাটফর্মের উপর।
ম্যাটি

2
@ ম্যাটিটি নিশ্চিত নয় যে আমি আপনাকে বুঝতে পেরেছি - ব্যবহার করার সঠিক জিনিসটি ইউনিক্স বলে মনে হচ্ছে LF(যা প্রোটোকল এবং সরঞ্জামগুলি জুড়ে প্রমিত স্ট্যান্ডার্ড লাইনযুক্ত) CRকেবল পুরানো ম্যাক্স (এবং অন্যান্য অস্পষ্ট প্ল্যাটফর্ম) দ্বারা ব্যবহৃত হয়েছিল এবং এটি খুব অযোগ্য বলে মনে হয়।
ক্যামিলো মার্টিন

আমি আমার বিভ্রান্তিকর শব্দ নির্বাচনের জন্য ক্ষমা চাইছি। আমি যেটাকে লাইনফিড (# 10) বলেছিলাম তা সত্যিই একটি নতুন লাইন, যদিও প্রায়শই এলএফ হিসাবে পরিচিত। আমি যেটিকে একটি নতুন লাইন (# 13) বলেছিলাম তা হ'ল সত্যিই একটি গাড়ি ফেরানো। যাই হোক না কেন, আমার বক্তব্যটি ছিল যে সমস্ত মানচিত্রগুলি সমস্ত প্ল্যাটফর্মগুলিতে একই। উইন্ডোজ (এই দুটি অক্ষর একটি লাইন শেষ করতে ব্যবহার করে) এবং ম্যাক (একটি লাইন শেষ করতে "ভুল" অক্ষর ব্যবহার করে) এইচটিএমএল সত্তাকে কোন শিরোনাম বৈশিষ্ট্যে ব্যবহার করতে হবে সে ক্ষেত্রে অপ্রাসঙ্গিক হওয়া উচিত। অনুমানটি বলছে &#10;, যদিও দৃশ্যত &#13;অনেক পরিস্থিতিতে কাজ করে।
ম্যাটি

2
সরল & # 13; লিনাক্সে ক্রোমের জন্য কাজ করে না। ক্রম & # 13; & # 10; যাইহোক, না।
স্যাম ওয়াটকিন্স

51

উল্লেখ করার মতো, আপনি যদি জাভাস্ক্রিপ্টটির সাথে শিরোনামের বৈশিষ্ট্যটি সেট করে থাকেন:

divElement.setAttribute("title", "Line one&#10;Line two");

এটি কাজ করবে না। জাভাস্ক্রিপ্টের সাথে যেভাবে পালিয়েছে আপনাকে সেই ASCII দশমিক 10 এএসসিআইআই হেক্সাডেসিমাল এ তে প্রতিস্থাপন করতে হবে। এটার মত:

divElement.setAttribute("title", "Line one\x0ALine two");


@ ম্যাক্সনানসি সম্মত হয়েছে এবং সেগুলির সমতুল্য ( \nযাহাই হউক না কেন চর কোড 10)
rvighne

29

ফায়ারফক্স 12 হিসাবে তারা এখন লাইন ফিড এইচটিএমএল সত্তা ব্যবহার করে লাইন বিরতি সমর্থন করে: &#10;

<span title="First line&#10;Second line">Test</span>

এটি আইইতে কাজ করে এবং শিরোনাম বৈশিষ্ট্যের জন্য এইচটিএমএল 5 টি অনুসারে সঠিক ।


16

আপনি যদি jQuery ব্যবহার করছেন:

$(td).attr("title", "One \n Two \n Three");

কাজ করবে.

আইই -9 এ পরীক্ষিত: কাজ করছে।


এমভিসি 3 তে কাজ করেছেন উদাহরণ: @ এইচটিএমএল.ড্রপডাউনলিস্ট ("RegId", নাল, "অঞ্চল নির্বাচন করুন", নতুন {শিরোনাম = "ড্রপ-ডাউন মেনু থেকে একটি অঞ্চল নির্বাচন করুন, valid n যা বৈধ চুক্তির নামের একটি তালিকা পেতে প্রয়োজন" , @class = "ফর্ম-নিয়ন্ত্রণ", অনচেঞ্জ = "getContractNames (এটি)", শৈলী = "প্রস্থ: 200px;"})
ওয়ারেন লাফ্রান্স

15

&#013;সমাধানে অবদান হিসাবে , &#009আপনার যদি কখনও এর মতো কিছু করার দরকার হয় তবে আমরা ট্যাবগুলির জন্যও ব্যবহার করতে পারি।

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

ডেমো

এখানে চিত্র বর্ণনা লিখুন


8

&#13; সমস্ত বড় ব্রাউজারগুলিতে কাজ করবে (IE অন্তর্ভুক্ত)


13
এই উত্তরটি পুরানো; & # 13; ক্রোম এবং অন্যান্য ব্রাউজারগুলিতেও কাজ করে।
সাক্স

7

আমি জানি আমি পার্টিতে দেরি করেছি, তবে যারা এই কাজটি দেখতে চান তাদের জন্য এখানে একটি ডেমো রয়েছে: http://jsfiddle.net/rzea/vsp6840b/3/

এইচটিএমএল ব্যবহৃত:

<a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>

2
সর্বাধিক আপ টু ডেট প্রতিক্রিয়া এবং ফায়ারফক্সে দুর্দান্ত কাজ করে। ধন্যবাদ।
মারওয়ান مروان

6

আমি বিশ্বাস করি না। ফায়ারফক্স 2 দীর্ঘ লিঙ্ক শিরোনাম যাই হোক না কেন ছাঁটাই করে এবং এগুলিকে কেবলমাত্র অল্প পরিমাণে সাহায্যের পাঠ্য দেওয়ার জন্য ব্যবহার করা উচিত। আপনার যদি আরও ব্যাখ্যার পাঠ্যের প্রয়োজন হয় তবে আমি প্রস্তাব দেব যে এটি লিঙ্কের সাথে সম্পর্কিত কোনও অনুচ্ছেদে রয়েছে। তারপরে আপনি সেই অনুচ্ছেদগুলিকে লুকিয়ে রাখতে এবং হোভারে সরঞ্জামদণ্ড হিসাবে তাদের দেখানোর জন্য টুলটিপ জাভাস্ক্রিপ্ট কোড যুক্ত করতে পারেন। এটি ক্রস-ব্রাউজার আইএমওতে কাজ করার জন্য এটি আপনার সেরা বাজি।


6

&#xD; <----- ক্যারি রিটার্ন sertোকানোর জন্য এটি প্রয়োজনীয় পাঠ্য।


1
সমস্ত ব্রাউজারে কাজ করে :)
মনো

6

ক্রোম 16 এবং সম্ভবত পূর্ববর্তী সংস্করণগুলিতে আপনি "\ n" ব্যবহার করতে পারেন। সিডনোট হিসাবে, "\ t" এছাড়াও কাজ করে


6

আমাদের প্রয়োজন ছিল যেখানে আমাদের এই সমস্তটি পরীক্ষা করার দরকার ছিল, আমি এখানে ভাগ করে নিতে চাই

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")
<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
  new 
  line</pre> Works in all browsers</p>
<hr/>

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#xD;</code> May work in some browsers</p>
<hr/>

<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>


<p title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Tooltip with <code></code>Unordered list tooltip</p>
<hr/>


<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>

<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>

<p title='Tool&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

বেহালা


6

ক্রোম 79-এ, &#13;আর কাজ করে না।

আমি এর সাথে সফল হয়েছিলাম:

&#13;&#10;

এটি সমস্ত বড় ব্রাউজারে কাজ করে।


5

কার জন্য &#10;কাজ করেনি আপনাকে সেই উপাদানটি স্টাইল করতে হবে যার উপরের রেখাগুলি এতে দৃশ্যমান:white-space: pre-line;

এই উত্তর থেকে রেফারেন্স: https://stackoverflow.com/a/17172412/1460591


1
এই স্টাইলটি কি প্রয়োগ করা দরকার? শিরোনাম? পছন্দ a[title]?
মোহাম্মদ জমির

4

কেবল এটি ব্যবহার করুন:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

আপনি এটি ব্যবহার করে শিরোনামে নতুন লাইন যুক্ত করতে পারেন &#x0a


4

শুধু জাভাস্ক্রিপ্ট ব্যবহার করুন। তারপরে বেশিরভাগ এবং পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ। নিউলাইনের জন্য অব্যাহতি ক্রম Use n ব্যবহার করুন Use

   document.getElementById("ElementID").title = 'First Line text \n Second line text'

ক্রোমের কোন সংস্করণ? এটি আমার পক্ষে কাজ করে এবং আমি ক্রোম ব্যবহার করি।
ওয়েলশবয়

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

4

&#013;যদি আপনি কেবল একটি সাধারণ শিরোনাম বৈশিষ্ট্য ব্যবহার করেন তবে এটি কাজ করা উচিত।

বুটস্ট্র্যাপ পপওভারগুলিতে, কেবলমাত্র বৈশিষ্ট্যে data-html="true" HTML ব্যবহার করুন এবং ব্যবহার করুন usedata-content

<div title="Hello &#013;World">hover here</div>


3

অ্যাক্সেসযোগ্যতার উপর উপলভ্য তথ্য এবং সিআর বা লাইন ব্রেকের সাহায্যে টুলটিপগুলি তাদের আরও বড় করে তোলার বিষয়ে প্রশংসা করা হয়েছে, বিভিন্ন ব্রাউজারগুলি বেসিকগুলির সাথে একমত হতে পারে না / করতে পারে না তা প্রমাণ করে যে তারা অ্যাক্সেসযোগ্যতার বিষয়ে খুব বেশি যত্ন নেয় না।


2
ব্রাউজার কাস্টমাইজড সরঞ্জামদ্বারগুলি
ডেভ

@ ডেভিটি এটি একটি দুর্দান্ত লিঙ্ক, তবে প্রস্থের বৈশিষ্ট্যের কারণে ডেমোতে লাইন
ব্রেকটি

3

ডব্লিউ 3 সি ওয়েবসাইটে এই নিবন্ধ অনুযায়ী :

সিডিএটিএ হ'ল ডকুমেন্টের অক্ষর সেট থেকে অক্ষরের একটি ক্রম এবং এতে চরিত্র সত্তা অন্তর্ভুক্ত থাকতে পারে। ব্যবহারকারী এজেন্টদের নিম্নরূপ হিসাবে বিশিষ্ট মানগুলি ব্যাখ্যা করা উচিত:

  • অক্ষর দিয়ে অক্ষর সত্তা প্রতিস্থাপন,
  • লাইন ফিডগুলি উপেক্ষা করুন,
  • প্রতিটি ক্যারেজ রিটার্ন বা ট্যাবকে একটি একক স্থান দিয়ে প্রতিস্থাপন করুন।

এর অর্থ হ'ল (কমপক্ষে) সিআর এবং এলএফ শিরোনাম বৈশিষ্ট্যের ভিতরে কাজ করবে না। আমি আপনাকে একটি টুলটিপ প্লাগইন ব্যবহার করার পরামর্শ দিচ্ছি। এই প্লাগইনগুলির বেশিরভাগই স্বেচ্ছাচারিত এইচটিএমএলকে একটি এলিমেন্টের সরঞ্জামদণ্ড হিসাবে প্রদর্শিত হতে দেয়।


1
হ্যাঁ, আমি জানি যে এটি অফিসিয়াল নয়। তুমি ভুল এর অর্থ এই নয় যে সেগুলি প্রদর্শিত হবে না। এর অর্থ হ'ল ডাব্লু 3 সি অনুপস্থিতিতে তারা কীভাবে প্রদর্শিত হবে তা নির্দেশ করে না ... পোস্টের বিন্দুটি হ'ল তারা আরও কার্যকরী প্লাগইনগুলি প্রতিস্থাপনের জন্য ব্যবহার করা যেতে পারে তা বোঝানোর জন্য নয় .... অবক্ষয়ের সময় এটি অন্য কোনও ক্ষেত্রে ব্যবহার করা যেতে পারে।
পেন্ডেরি

@ip: আমি আপডেট হয়েছি যে ডাব্লু 3 সি আপডেটেড সুপারিশ করে যে ব্রাউজারগুলি এলএফ চরিত্রের চারপাশে সামগ্রী বিভক্ত করে। তবে ব্রাউজারগুলি এই আচরণটি শেষ পর্যন্ত বাস্তবায়ন করবে।
সালমান এ

2

অনেক সুন্দর দেখানোর সরঞ্জামদণ্ডগুলি ম্যানুয়ালি তৈরি করা যেতে পারে এবং এতে HTML ফর্ম্যাটিং অন্তর্ভুক্ত থাকতে পারে।

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more&#13;&#10;and then some">over</a> the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>

<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>

</body>
</html>

এটি এর উপর w3 স্কুল স্কুল থেকে নেওয়া হয়েছে । উপরের কোডটি এখানে ব্যবহার করুন


1

রেজার সিনট্যাক্স

এএসপি.নেট এমভিসির ক্ষেত্রে আপনি কেবল ব্যবহারের হিসাবে শিরোনামটি পরিবর্তনশীল হিসাবে সংরক্ষণ করতে পারেন \r\nএবং এটি কাজ করবে।

@{ 
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>

0

হ্যাক তবে কাজ করে - (ক্রোম এবং মোবাইলে পরীক্ষিত)

এটি বিরতি না হওয়া পর্যন্ত কেবল কোনও ব্রেক স্পেস যুক্ত করবেন না - আপনাকে সামগ্রীর পরিমাণের উপর নির্ভর করে টুলটিপের আকার সীমাবদ্ধ করতে হতে পারে তবে ছোট পাঠ্য বার্তাগুলির জন্য এটি কাজ করে:

&nbsp;&nbsp; etc

উপরের সব কিছু চেষ্টা করে দেখলাম এবং এটিই আমার পক্ষে কাজ করেছে -


0

আমি নতুন লাইনে শিরোনাম পাঠ্য প্রদর্শনের জন্য "" চেষ্টা করেছি এবং এটি একটি কবজির মতো কাজ করে


0

আমি ফায়ারফক্স 68.7.0esr এ আছি এবং এটি &#013;কাজ করে না। লাইনগুলি ভেঙে <CR>কাজ করে তাই আমি যেহেতু এটি সহজ এবং সামনের দিকে যাচ্ছি। অর্থাত

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

-1

ব্যবহার data-html="true"এবং প্রয়োগ <br>


1
এটি অনুমানের অংশ নয়। কিছু র্যান্ডম টুলটিপ প্লাগইন হতে হবে
টিজে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.