ฉันจะใช้การคืนค่าขนส่งในคำแนะนำเครื่องมือ HTML ได้อย่างไร

ฉันกำลังเพิ่มคำแนะนำเครื่องมือ verbose ในเว็บไซต์ของเราและฉันต้องการ (โดยไม่ต้องใช้ปลั๊กอิน jQuery whiz-bang, ฉันรู้ว่ามีจำนวนมาก!) เพื่อใช้ carriage return เพื่อจัดรูปแบบคำแนะนำเครื่องมือ

เพื่อเพิ่มเคล็ดลับที่ฉันใช้titleคุณลักษณะ ฉันได้ดูไซต์ทั่วไปและใช้เทมเพลตพื้นฐานของ:

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

ฉันได้ลองแทนที่?ด้วย:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (ฉันใช้ C #)

ไม่มีการทำงานใด ๆ ข้างต้น เป็นไปได้ไหม?

มันง่ายมากที่คุณจะเตะตัวเอง ... เพียงแค่กด Enter!

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

Firefox จะไม่แสดงคำแนะนำเครื่องมือหลายบรรทัดเลย - มันจะแทนที่บรรทัดใหม่ด้วยอะไร

สเปคใหม่ล่าสุดช่วยให้ตัวละครอาหารเส้นเพื่อแบ่งบรรทัดง่ายภายในแอตทริบิวต์หรือนิติบุคคล
(หมายเหตุว่าตัวละคร#และ;จะต้อง) จะ OK

ลองใช้อักขระ 10 แต่จะไม่ทำงานใน Firefox :(

ข้อความจะปรากฏขึ้น (ถ้าทั้งหมด) ในลักษณะที่ขึ้นกับเบราว์เซอร์ เคล็ดลับเครื่องมือขนาดเล็กทำงานบนเบราว์เซอร์ส่วนใหญ่ เคล็ดลับเครื่องมือยาวและการทำลายเส้นใน IE และ Safari (ใช้
หรือ
ขึ้นบรรทัดใหม่) Firefox และ Opera ไม่รองรับการขึ้นบรรทัดใหม่ Firefox ไม่รองรับคำแนะนำเครื่องมือที่ยาว

http://modp.com/wiki/htmltitletooltips

ปรับปรุง:

ตั้งแต่เดือนมกราคม 2558 Firefox รองรับการใช้
การแทรกตัวแบ่งบรรทัดในtitleแอตทริบิวต์HTML ดูตัวอย่างข้อมูลด้านล่าง

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

ทดสอบสิ่งนี้ใน IE, Chrome, Safari, Firefox (รุ่นล่าสุด 2012-11-27):



ทำงานได้ในทุกสิ่ง ...

นอกจากนี้ยังควรกล่าวถึงหากคุณตั้งค่าแอตทริบิวต์หัวเรื่องด้วย Javascript เช่นนี้:

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

มันจะไม่ทำงาน คุณต้องแทนที่ ASCII ทศนิยม 10 เป็นเลขฐานสิบหก ASCII ในทางที่จะหลบหนีด้วย Javascript แบบนี้:

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

ตั้งแต่ Firefox 12 ตอนนี้รองรับการแบ่งบรรทัดโดยใช้เอนทิตี HTML ของฟีดบรรทัด: 


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

งานนี้ใน IE และเป็นที่ถูกต้องตามสเปค HTML5 สำหรับแอตทริบิวต์ชื่อ

หากคุณใช้ jQuery:

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

จะทำงาน.

ทดสอบใน IE-9: ใช้งานได้

เพื่อช่วย
แก้ปัญหาเราสามารถใช้&#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>

การสาธิต


 จะทำงานกับเบราว์เซอร์เอกทั้งหมด (รวมอยู่ใน IE)

ฉันรู้ว่าฉันมางานปาร์ตี้ช้า แต่สำหรับผู้ที่ต้องการเห็นการทำงานนี่เป็นตัวอย่าง: http://jsfiddle.net/rzea/vsp6840b/3/

HTML ที่ใช้:

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

ฉันไม่เชื่อว่ามันเป็น Firefox 2 จดจ้องลิงค์ยาว ๆ อยู่ดีและควรใช้เพื่อส่งข้อความช่วยเหลือจำนวนเล็กน้อยเท่านั้น หากคุณต้องการคำอธิบายเพิ่มเติมฉันอยากจะแนะนำว่ามันเป็นของย่อหน้าที่เกี่ยวข้องกับลิงค์ จากนั้นคุณสามารถเพิ่มรหัสเครื่องมือคำแนะนำจาวาสคริปต์เพื่อซ่อนย่อหน้าเหล่านั้นและแสดงเป็นคำแนะนำเครื่องมือเมื่อวางเมาส์ไว้ นั่นเป็นทางออกที่ดีที่สุดในการทำให้ IMO ทำงานข้ามเบราว์เซอร์


 <----- นี่คือข้อความที่จำเป็นในการแทรกการคืนเครื่อง

ใน Chrome 16 และรุ่นก่อนหน้านี้คุณสามารถใช้ "\ n" ในฐานะ sidenote "\ t" ก็ใช้ได้เช่นกัน

เรามีข้อกำหนดที่เราต้องการทดสอบสิ่งเหล่านี้นี่คือสิ่งที่ฉันต้องการแบ่งปัน

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

ซอ

ใน Chrome 79 
ไม่ทำงานอีกต่อไป

ฉันประสบความสำเร็จด้วย:




สิ่งนี้ใช้ได้ในเบราว์เซอร์หลัก ๆ ทั้งหมด

สำหรับใคร 
ไม่ทำงานคุณต้องจัดองค์ประกอบองค์ประกอบที่บรรทัดสามารถมองเห็นได้ในรูปแบบ:white-space: pre-line;

อ้างอิงจากคำตอบนี้: https://stackoverflow.com/a/17172412/1460591

เพียงใช้สิ่งนี้:

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

&#x0aคุณสามารถเพิ่มบรรทัดใหม่ที่ชื่อโดยใช้นี้

เพียงใช้จาวาสคริปต์ จากนั้นเข้ากันได้กับเบราว์เซอร์ส่วนใหญ่และรุ่นเก่ากว่า ใช้ escape sequence \ n เพื่อขึ้นบรรทัดใหม่

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

สิ่งนี้
จะใช้ได้ผลถ้าคุณใช้แอตทริบิวต์ชื่อเรื่องง่าย ๆ

บน bootstrap popovers เพียงใช้data-html="true" และใช้ html ในdata-contentคุณสมบัติ

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

จากข้อมูลที่มีอยู่ในความสามารถในการเข้าถึงและการใช้คำแนะนำเครื่องมือที่ทำให้พวกเขามีขนาดใหญ่ขึ้นด้วยการใช้ CR หรือตัวแบ่งบรรทัดเป็นที่นิยมข้อเท็จจริงที่ว่าเบราว์เซอร์ต่างๆไม่สามารถ / จะไม่เห็นด้วยกับพื้นฐาน

ตามบทความนี้ในเว็บไซต์ w3c :

CDATA คือลำดับของอักขระจากชุดอักขระของเอกสารและอาจรวมถึงตัวอักขระ ตัวแทนผู้ใช้ควรตีความค่าแอตทริบิวต์ดังต่อไปนี้:

• แทนที่เอนทิตีอักขระด้วยอักขระ
• ละเว้นบรรทัดฟีด
• แทนที่แคร่ตลับหมึกหรือแท็บแต่ละอันด้วยช่องว่างเดียว

ซึ่งหมายความว่า (อย่างน้อย) CR และ LF จะไม่ทำงานภายในแอตทริบิวต์ชื่อ ฉันขอแนะนำให้คุณใช้ปลั๊กอินคำแนะนำเครื่องมือ ส่วนใหญ่ของปลั๊กอินเหล่านี้อนุญาตให้ HTML แบบสุ่มสามารถแสดงเป็นคำแนะนำเครื่องมือขององค์ประกอบ

เคล็ดลับเครื่องมือที่ดูดีกว่านี้สามารถสร้างได้ด้วยตนเองและสามารถรวมการจัดรูปแบบ 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>

สิ่งนี้นำมาจากโพสต์ของ w3schoolsเกี่ยวกับเรื่องนี้ ทดสอบกับโค้ดข้างต้นที่นี่

ไวยากรณ์ของมีดโกน

ในกรณีของ ASP.NET MVC คุณสามารถจัดเก็บหัวเรื่องเป็นตัวแปรตามที่ใช้\r\nและมันจะใช้งานได้

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

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

แฮ็ก แต่ใช้ได้ - (ทดสอบกับ Chrome และมือถือ)

เพียงเพิ่มไม่มีการเว้นช่องว่างจนกว่าจะหยุดพัก - คุณอาจจะต้อง จำกัด ขนาดคำแนะนำเครื่องมือขึ้นอยู่กับปริมาณของเนื้อหา

   etc

พยายามทุกอย่างด้านบนและนี่เป็นสิ่งเดียวที่ทำงานให้ฉัน -

ฉันได้ลองกับ "" เพื่อแสดงข้อความไตเติ้ลในบรรทัดใหม่และมันใช้งานได้อย่างมีเสน่ห์

ฉันใช้ Firefox 68.7.0esr แล้วใช้
ไม่ได้ การแบ่งสายผ่าน<CR>นั้นใช้งานได้ดังนั้นฉันจะไปด้วยเพราะมันง่ายและไปข้างหน้า กล่าวคือ

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

ใช้และนำไปใช้data-html="true"<br>