كيف يمكنني استخدام عربة العودة في HTML تلميح?
سؤال
أنا حاليا إضافة مطول تلميحات إلى موقعنا ، و أود (دون الحاجة إلى اللجوء إلى أزيز الانفجار مسج المساعد, أعرف أن هناك العديد من!) إلى استخدام النقل يعود إلى شكل تلميح الأدوات.
لإضافة تلميح أنا باستخدام 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>
فايرفوكس لن يتم عرض متعدد الخطوط تلميحات في كل الرغم من ذلك - فإنه سيتم استبدال أسطر مع أي شيء.
نصائح أخرى
على أحدث مواصفات يسمح خط تغذية شخصية لذلك بسيط كسر خط داخل السمة أو كيان
(لاحظ أن الأحرف #
و ;
مطلوبة) هي موافق.
محاولة حرف 10.فهو لن يعمل في فايرفوكس على الرغم من.:(
يتم عرض النص (على كل) في المتصفح تعتمد الطريقة.صغيرة تلميحات تعمل على معظم المتصفحات.طويلة تلميحات و كسر خط العمل في أي و سفاري (استخدام
أو
عن جديدة السطر).فايرفوكس وأوبرا لا دعم أسطر.فايرفوكس لا الدعم طويل تلميحات.
http://modp.com/wiki/htmltitletooltips
تحديث:
اعتبارا من كانون الثاني / يناير 2015 فايرفوكس يدعم استخدام
لإدراج خط كسر في HTML title
السمة.ترى مقتطف المثال أدناه.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>
اختبرت هذا في IE, Chrome, Safari, Firefox (أحدث الإصدارات 2012-11-27):
يعمل في كل منها...
الجدير بالذكر أيضا, إذا كنت في وضع سمة العنوان مع جافا سكريبت مثل هذا:
divElement.setAttribute("title", "Line one Line two");
فهو لن يعمل.لديك لاستبدال أن ASCII عشري 10 إلى ASCII عشري في الطريقة التي هرب مع جافا سكريبت.مثل هذا:
divElement.setAttribute("title", "Line one\x0ALine two");
كما من فايرفوكس 12 هم الآن دعم خط فواصل باستخدام خط تغذية HTML الكيان:
<span title="First line Second line">Test</span>
هذا يعمل في IE و هو الصحيح وفقا HTML5 المواصفات عن سمة العنوان.
إذا كنت تستخدم مسج :
$(td).attr("title", "One \n Two \n Three");
سوف تعمل.
اختبار في أي-9 :العامل.
أعلم أني متأخر إلى الحزب ، ولكن بالنسبة لأولئك الذين يريدون فقط أن نرى هذا العامل ، وهنا التجريبي: http://jsfiddle.net/rzea/vsp6840b/3/
HTML المستخدمة:
<a href="#" title="First Line
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>
سوف تعمل على جميع التخصصات المتصفحات (IE مدرجة)
كان لدينا شرط حيث كنا في حاجة إلى اختبار جميع هذه, هنا هو ما كنت ترغب في مشاركة
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 Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>
<hr/>
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#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
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>
<hr/>
أنا لا أعتقد أنه هو.فايرفوكس 2 الديكورات طويلة عناوين الارتباط على أي حال ، ينبغي حقا أن تستخدم فقط لنقل كمية صغيرة من نص التعليمات.إذا كنت بحاجة إلى مزيد من التوضيح نص أود أن أقترح أنه ينتمي في الفقرة المرتبطة الرابط.يمكنك إضافة تلميح شفرة جافا سكريبت لإخفاء تلك الفقرات وتبين لهم أنها تلميحات على التحويم.هذا هو أفضل رهان الحصول على العمل عبر متصفح المنظمة البحرية الدولية.

<----- هذا هو نص في حاجة إلى إدراج تحمل العودة.
على كروم 16, وربما الإصدارات السابقة ، يمكنك استخدام " ".كما sidenote, " " يعمل أيضا
أما بالنسبة لمن
لم تعمل لديك أسلوب عنصر على أي خطوط واضحة في : white-space: pre-line;
المشار إليها من هذا الجواب : https://stackoverflow.com/a/17172412/1460591
فقط استخدام هذا:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
يمكنك إضافة خط جديد على العنوان باستخدام هذا 

.
مجرد استخدام جافا سكريبت.ثم متوافق مع معظم المتصفحات القديمة.استخدام تسلسل الهروب على السطر.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
من المعلومات المتاحة على الوصول واستخدام تلميحات مما يجعلها أكبر مع استخدام الكروم أو كسر خط هو محل تقدير حقيقة أن مختلف المتصفحات لا/لن توافق على أساسيات يدل على أنهم لا يهتمون كثيرا عن الوصول إليها.
وفقا لهذا المقال على موقع w3c:
CDATA هو سلسلة من الأحرف من الوثيقة مجموعة أحرف ، قد تشمل الكيانات الأحرف.وكلاء المستخدم يجب أن تفسير السمة القيم على النحو التالي:
- استبدال حرف الكيانات مع الشخصيات ،
- تجاهل الخط يغذي ،
- استبدال كل حرف عودة أو علامة التبويب مع مساحة واحدة.
وهذا يعني أن (على الأقل) CR و إذا لن تعمل داخل سمة العنوان.أقترح عليك استخدام البرنامج المساعد تلميح.معظم هذه الإضافات تسمح التعسفي HTML ليتم عرضها باعتبارها العنصر تلميح الأدوات.
هذا 
يجب أن تعمل إذا كنت مجرد استخدام بسيط سمة العنوان.
على التمهيد بوبوفيرس فقط استخدام data-html="true"
و استخدام html في data-content
السمة .
<div title="Hello 
World">hover here</div>
أجمل بكثير تبحث تلميحات يمكن إنشاء يدويا ، يمكن أن تشمل تنسيق 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 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>
هاك ولكن يعمل - (اختبار على كروم المحمول)
فقط إضافة أي كسر المساحات حتى فواصل - قد يكون لديك للحد من حجم تلميح اعتمادا على كمية المحتوى الصغيرة الرسائل النصية يعمل هذا:
etc
حاولت كل شيء أعلاه و هذا هو الشيء الوحيد الذي عملت بالنسبة لي -
استخدام data-html="true"
وتطبيق <br>
.