كيف يمكنني استخدام عربة العودة في HTML تلميح?

Question

أنا حاليا إضافة مطول تلميحات إلى موقعنا ، و أود (دون الحاجة إلى اللجوء إلى أزيز الانفجار مسج المساعد, أعرف أن هناك العديد من!) إلى استخدام النقل يعود إلى شكل تلميح الأدوات.

لإضافة تلميح أنا باستخدام title السمة.لقد بحثت في جميع أنحاء المواقع المعتادة و باستخدام القالب الأساسي من:

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

لقد حاولت استبدال ? مع:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (أنا باستخدام C#)

أي من الأعمال المذكورة أعلاه.هل من الممكن ؟

Answer 1

انها بسيطة جدا سوف ركلة نفسك...فقط اضغط على enter!

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

فايرفوكس لن يتم عرض متعدد الخطوط تلميحات في كل الرغم من ذلك - فإنه سيتم استبدال أسطر مع أي شيء.

Answer 2

على أحدث مواصفات يسمح خط تغذية شخصية لذلك بسيط كسر خط داخل السمة أو كيان 
 (لاحظ أن الأحرف # و ; مطلوبة) هي موافق.

Answer 3

محاولة حرف 10.فهو لن يعمل في فايرفوكس على الرغم من.:(

يتم عرض النص (على كل) في المتصفح تعتمد الطريقة.صغيرة تلميحات تعمل على معظم المتصفحات.طويلة تلميحات و كسر خط العمل في أي و سفاري (استخدام 
 أو 
 عن جديدة السطر).فايرفوكس وأوبرا لا دعم أسطر.فايرفوكس لا الدعم طويل تلميحات.

http://modp.com/wiki/htmltitletooltips

تحديث:

اعتبارا من كانون الثاني / يناير 2015 فايرفوكس يدعم استخدام 
 لإدراج خط كسر في HTML title السمة.ترى مقتطف المثال أدناه.

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

Answer 4

اختبرت هذا في IE, Chrome, Safari, Firefox (أحدث الإصدارات 2012-11-27):



يعمل في كل منها...

Answer 5

الجدير بالذكر أيضا, إذا كنت في وضع سمة العنوان مع جافا سكريبت مثل هذا:

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

فهو لن يعمل.لديك لاستبدال أن ASCII عشري 10 إلى ASCII عشري في الطريقة التي هرب مع جافا سكريبت.مثل هذا:

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

Answer 6

كما من فايرفوكس 12 هم الآن دعم خط فواصل باستخدام خط تغذية HTML الكيان: 


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

هذا يعمل في IE و هو الصحيح وفقا HTML5 المواصفات عن سمة العنوان.

Answer 7

إذا كنت تستخدم مسج :

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

سوف تعمل.

اختبار في أي-9 :العامل.

Answer 8

كمساهمة في 
 الحل, يمكننا أيضا استخدام &#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>

Demo

Answer 9

أعلم أني متأخر إلى الحزب ، ولكن بالنسبة لأولئك الذين يريدون فقط أن نرى هذا العامل ، وهنا التجريبي: 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>

Answer 10


 سوف تعمل على جميع التخصصات المتصفحات (IE مدرجة)

Answer 11

كان لدينا شرط حيث كنا في حاجة إلى اختبار جميع هذه, هنا هو ما كنت ترغب في مشاركة

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

كمان

Answer 12

أنا لا أعتقد أنه هو.فايرفوكس 2 الديكورات طويلة عناوين الارتباط على أي حال ، ينبغي حقا أن تستخدم فقط لنقل كمية صغيرة من نص التعليمات.إذا كنت بحاجة إلى مزيد من التوضيح نص أود أن أقترح أنه ينتمي في الفقرة المرتبطة الرابط.يمكنك إضافة تلميح شفرة جافا سكريبت لإخفاء تلك الفقرات وتبين لهم أنها تلميحات على التحويم.هذا هو أفضل رهان الحصول على العمل عبر متصفح المنظمة البحرية الدولية.

Answer 13


 <----- هذا هو نص في حاجة إلى إدراج تحمل العودة.

Answer 14

على كروم 16, وربما الإصدارات السابقة ، يمكنك استخدام " ".كما sidenote, " " يعمل أيضا

Answer 15

أما بالنسبة لمن 
 لم تعمل لديك أسلوب عنصر على أي خطوط واضحة في : white-space: pre-line;

المشار إليها من هذا الجواب : https://stackoverflow.com/a/17172412/1460591

Answer 16

فقط استخدام هذا:

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

يمكنك إضافة خط جديد على العنوان باستخدام هذا &#x0a.

Answer 17

مجرد استخدام جافا سكريبت.ثم متوافق مع معظم المتصفحات القديمة.استخدام تسلسل الهروب على السطر.

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

Answer 18

من المعلومات المتاحة على الوصول واستخدام تلميحات مما يجعلها أكبر مع استخدام الكروم أو كسر خط هو محل تقدير حقيقة أن مختلف المتصفحات لا/لن توافق على أساسيات يدل على أنهم لا يهتمون كثيرا عن الوصول إليها.

Answer 19

وفقا لهذا المقال على موقع w3c:

CDATA هو سلسلة من الأحرف من الوثيقة مجموعة أحرف ، قد تشمل الكيانات الأحرف.وكلاء المستخدم يجب أن تفسير السمة القيم على النحو التالي:

• استبدال حرف الكيانات مع الشخصيات ،
• تجاهل الخط يغذي ،
• استبدال كل حرف عودة أو علامة التبويب مع مساحة واحدة.

وهذا يعني أن (على الأقل) CR و إذا لن تعمل داخل سمة العنوان.أقترح عليك استخدام البرنامج المساعد تلميح.معظم هذه الإضافات تسمح التعسفي HTML ليتم عرضها باعتبارها العنصر تلميح الأدوات.

Answer 20

هذا 
 يجب أن تعمل إذا كنت مجرد استخدام بسيط سمة العنوان.

على التمهيد بوبوفيرس فقط استخدام data-html="true" و استخدام html في data-content السمة .

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

Answer 21

أجمل بكثير تبحث تلميحات يمكن إنشاء يدويا ، يمكن أن تشمل تنسيق 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 على هذا. تجربة مع رمز أعلاه هنا.

Answer 22

الحلاقة الجملة

في حالة ASP.NET MVC يمكنك فقط من تخزين عنوان متغير حسب الاستخدام \r\n وأنها سوف تعمل.

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

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

Answer 23

هاك ولكن يعمل - (اختبار على كروم المحمول)

فقط إضافة أي كسر المساحات حتى فواصل - قد يكون لديك للحد من حجم تلميح اعتمادا على كمية المحتوى الصغيرة الرسائل النصية يعمل هذا:

   etc

حاولت كل شيء أعلاه و هذا هو الشيء الوحيد الذي عملت بالنسبة لي -

Answer 24

استخدام data-html="true" وتطبيق <br>.