Làm cách nào tôi có thể sử dụng trả lại vận chuyển trong chú giải công cụ HTML?

Tôi hiện đang thêm các chú giải công cụ dài dòng vào trang web của chúng tôi và tôi muốn (không cần phải dùng đến plugin jQuery whiz-bang, tôi biết có rất nhiều!) Để sử dụng trả về vận chuyển để định dạng chú giải công cụ.

Để thêm mẹo tôi đang sử dụng titlethuộc tính. Tôi đã xem xét các trang web thông thường và sử dụng mẫu cơ bản của:

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

Tôi đã thử thay thế ?bằng:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (Tôi đang sử dụng C #)

Không có công trình nào ở trên. Có thể không?

Thật đơn giản, bạn sẽ tự đá mình ... chỉ cần nhấn enter!

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

Mặc dù vậy, Firefox sẽ không hiển thị các chú giải công cụ đa dòng - nó sẽ thay thế các dòng mới bằng không có gì.

Đặc tả kỹ thuật mới nhất cho phép ký tự nguồn cấp dữ liệu, do đó, ngắt dòng đơn giản bên trong thuộc tính hoặc thực thể 
(lưu ý rằng các ký tự #và ;được yêu cầu) là OK.

Hãy thử ký tự 10. Nó sẽ không hoạt động trong Firefox. :

Văn bản được hiển thị (nếu có) theo cách phụ thuộc vào trình duyệt. Chú giải công cụ nhỏ hoạt động trên hầu hết các trình duyệt. Chú giải công cụ dài và ngắt dòng hoạt động trong IE và Safari (sử dụng 
hoặc 
cho một dòng mới). Firefox và Opera không hỗ trợ các dòng mới. Firefox không hỗ trợ các chú giải công cụ dài.

http://modp.com/wiki/htmltitletooltips

Cập nhật:

Kể từ tháng 1 năm 2015, Firefox không hỗ trợ sử dụng 
để chèn ngắt dòng trong titlethuộc tính HTML . Xem ví dụ đoạn trích dưới đây.

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

Đã thử nghiệm điều này trong IE, Chrome, Safari, Firefox (phiên bản mới nhất 2012-11-27):



Hoạt động trong tất cả chúng ...

Cũng đáng đề cập, nếu bạn đang đặt thuộc tính tiêu đề bằng Javascript như thế này:

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

Nó sẽ không hoạt động. Bạn phải thay thế số thập phân 10 của ASCII thành thập lục phân A ASCII theo cách nó được thoát bằng Javascript. Như thế này:

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

Kể từ Firefox 12, giờ đây họ hỗ trợ ngắt dòng bằng cách sử dụng thực thể HTML của nguồn cấp dữ liệu: 


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

Điều này hoạt động trong IE và là chính xác theo thông số HTML5 cho thuộc tính tiêu đề .

Nếu bạn đang sử dụng jQuery:

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

sẽ làm việc.

đã thử nghiệm trong IE-9: đang hoạt động.

Để đóng góp cho 
giải pháp, chúng tôi cũng có thể sử dụng &#009cho các tab nếu bạn cần làm điều gì đó như thế này.

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

Bản giới thiệu


 sẽ hoạt động trên tất cả các trình duyệt chuyên ngành (bao gồm IE)

Tôi biết tôi đến bữa tiệc muộn, nhưng với những người chỉ muốn xem hoạt động này, đây là bản demo: http://jsfiddle.net/rzea/vsp6840b/3/

HTML được sử dụng:

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

Tôi không tin đó là. Dù sao thì Firefox 2 cũng có các tiêu đề liên kết dài và chúng thực sự chỉ nên được sử dụng để truyền tải một lượng nhỏ văn bản trợ giúp. Nếu bạn cần thêm văn bản giải thích, tôi sẽ đề nghị rằng nó thuộc về một đoạn liên kết với liên kết. Sau đó, bạn có thể thêm mã javascript của tooltip để ẩn các đoạn đó và hiển thị chúng dưới dạng chú giải công cụ khi di chuột. Đó là đặt cược tốt nhất của bạn để làm cho nó hoạt động IMO trên nhiều trình duyệt.


 <----- Đây là văn bản cần thiết để chèn Carry Return.

Trên Chrome 16 và có thể các phiên bản cũ hơn, bạn có thể sử dụng "\ n". Là một sidenote, "\ t" cũng hoạt động

Chúng tôi có một yêu cầu cần kiểm tra tất cả những điều này, đây là những gì tôi muốn chia sẻ

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

Vĩ cầm

Trên Chrome 79, 
không hoạt động nữa.

Tôi đã thành công với:




Điều này hoạt động trong tất cả các trình duyệt chính.

Đối với những người 
không làm việc, bạn phải tạo kiểu cho thành phần mà các dòng được hiển thị trong:white-space: pre-line;

Được tham khảo từ Câu trả lời này: https://stackoverflow.com/a/17172412/1460591

Chỉ cần sử dụng này:

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

Bạn có thể thêm dòng mới vào tiêu đề bằng cách sử dụng này &#x0a.

Chỉ cần sử dụng JavaScript. Sau đó tương thích với hầu hết các trình duyệt cũ hơn. Sử dụng chuỗi thoát \ n cho dòng mới.

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

Điều này 
sẽ hoạt động nếu bạn chỉ sử dụng một thuộc tính tiêu đề đơn giản.

trên bootstrap popovers, chỉ cần sử dụng data-html="true" và sử dụng html trong data-contentthuộc tính.

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

Từ thông tin có sẵn về khả năng truy cập và việc sử dụng chú giải công cụ làm cho chúng lớn hơn khi sử dụng CR hoặc ngắt dòng được đánh giá cao, thực tế là các trình duyệt khác nhau không thể / sẽ không đồng ý về những điều cơ bản cho thấy rằng họ không quan tâm nhiều đến khả năng truy cập.

Theo bài viết này trên trang web w3c :

CDATA là một chuỗi các ký tự từ bộ ký tự tài liệu và có thể bao gồm các thực thể ký tự. Tác nhân người dùng nên diễn giải các giá trị thuộc tính như sau:

• Thay thế các thực thể nhân vật bằng các ký tự,
• Bỏ qua các nguồn cấp dữ liệu,
• Thay thế mỗi trở lại vận chuyển hoặc tab bằng một không gian duy nhất.

Điều này có nghĩa là (ít nhất) CR và LF sẽ không hoạt động bên trong thuộc tính tiêu đề. Tôi đề nghị bạn nên sử dụng plugin tooltip. Hầu hết các plugin này cho phép HTML tùy ý được hiển thị dưới dạng chú giải công cụ của phần tử.

Các chú giải công cụ đẹp hơn có thể được tạo thủ công và có thể bao gồm định dạng 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>

Điều này được lấy từ bài đăng của w3schools về điều này. Thử nghiệm với mã trên đây .

Dao cạo cú pháp

Trong trường hợp ASP.NET MVC, bạn chỉ có thể lưu trữ tiêu đề dưới dạng một biến khi sử dụng \r\nvà nó sẽ hoạt động.

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

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

hack nhưng hoạt động - (đã thử nghiệm trên chrome và di động)

chỉ cần thêm không có dấu cách cho đến khi nó bị vỡ - bạn có thể phải giới hạn kích thước chú giải công cụ tùy thuộc vào lượng nội dung nhưng đối với các tin nhắn văn bản nhỏ thì công việc này:

   etc

Đã thử tất cả mọi thứ ở trên và đây là điều duy nhất làm việc cho tôi -

Tôi đã thử với "" để hiển thị văn bản tiêu đề trong dòng mới và nó hoạt động như một nét quyến rũ

Tôi đang sử dụng firefox 68.7.0esr và 
không hoạt động. Phá vỡ các dòng thông qua <CR>đã làm việc vì vậy tôi đi với nó vì nó đơn giản và chuyển tiếp. I E

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

sử dụng data-html="true"và áp dụng <br>.