HTML araç ipucunda satır başı nasıl kullanabilirim?

Şu anda sitemize ayrıntılı araç ipuçları ekliyorum ve araç ipucu biçimlendirmek için taşıma iadelerini kullanmak için (bir whiz-bang jQuery eklentisine başvurmak zorunda kalmadan istiyorum!)

İpucu eklemek için titleözniteliğini kullanıyorum . Her zamanki sitelere baktım ve temel şablonunu kullanarak:

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

Ben yerine ?ile denedim :

• <br />
• &013; / 

• \r\n
• Environment.NewLine (C # kullanıyorum)

Yukarıdakilerin hiçbiri çalışmaz. Mümkün mü?

Kendinizi tekmelemek çok basit ... sadece enter tuşuna basın!

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

Firefox çok satırlı araç ipuçlarını hiç göstermeyecek - yeni satırları hiçbir şeyle değiştirmeyecek.

En son spesifikasyon satır besleme karakterine izin verir, bu nedenle öznitelik veya varlık içinde basit bir satır sonu 
(karakterlerin #ve ;gerekli olması gerektiğini unutmayın ) TAMAM.

Karakter 10'u deneyin. Ancak Firefox'ta çalışmaz. :(

Metin (varsa) tarayıcıya bağlı bir şekilde görüntülenir. Küçük araç ipuçları çoğu tarayıcıda çalışır. IE ve Safari'de uzun araç ipuçları ve satır kırma işleri ( yeni satırsonu için 
veya kullanın 
). Firefox ve Opera yeni satırları desteklemez. Firefox uzun araç ipuçlarını desteklemez.

http://modp.com/wiki/htmltitletooltips

Güncelleme:

Ocak 2015 itibariyle Firefox, 
bir HTML titleözelliğine satır sonu eklemek için kullanmayı destekliyor . Aşağıdaki snippet örneğine bakın.

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

Bunu IE, Chrome, Safari, Firefox'ta test etti (en son sürümler 2012-11-27):



Hepsinde çalışıyor ...

Ayrıca, böyle bir Javascript ile title özniteliğini ayarlıyorsanız, belirtmeye değer:

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

Çalışmaz. Bu ASCII ondalık 10'u Javascript ile kaçış biçiminde bir ASCII onaltılık A ile değiştirmeniz gerekir. Bunun gibi:

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

Firefox 12'den itibaren artık satır besleme HTML varlığını kullanarak satır sonlarını destekliyorlar: 


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

Bu, IE'de çalışır ve HTML5 spesifikasyonuna göre doğrudur. title özniteliği .

JQuery kullanıyorsanız:

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

çalışacak.

IE-9'da test edildi: çalışma.

Çözüme bir katkı olarak, böyle bir şey yapmanız gerektiğinde sekmeler için 
de kullanabiliriz &#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>

gösteri


 tüm ana tarayıcılarda çalışacak (IE dahil)

Partiye geç kaldığımı biliyorum, ama sadece bu çalışmayı görmek isteyenler için bir demo var: http://jsfiddle.net/rzea/vsp6840b/3/

Kullanılan 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>

Buna inanmıyorum. Firefox 2 zaten uzun link başlıklarını kırpıyor ve gerçekten sadece az miktarda yardım metni iletmek için kullanılmalıdır. Daha fazla açıklama metnine ihtiyacınız varsa, bunun bağlantıyla ilişkili bir paragrafa ait olduğunu öneririm. Daha sonra, bu paragrafları gizlemek ve fareyle üzerine gelindiğinde araç ipuçları olarak göstermek için ipucu javascript kodunu ekleyebilirsiniz. Tarayıcılar arası IMO'yu çalıştırmanın en iyi yolu budur.


 <----- Bu, Geri Dönüşü eklemek için gereken metindir.

Chrome 16 ve muhtemelen daha önceki sürümlerde "\ n" kullanabilirsiniz. Bir sidenote olarak, "\ t" de çalışır

Bunların hepsini test etmemiz gereken bir gereksinimimiz vardı, işte paylaşmak istediğim şey

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

Vaktini boşa harcamak

Chrome 79'da, 
 artık çalışmıyor.

Şununla başarılı oldum:




Bu, tüm büyük tarayıcılarda çalışır.

Kime gelince 
 işe yaramadığı konusunda, çizgilerin göründüğü öğeyi şu şekilde stilize etmeniz gerekir:white-space: pre-line;

Bu Yanıttan referans alınmıştır: https://stackoverflow.com/a/17172412/1460591

Sadece şunu kullanın:

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

Bunu kullanarak başlığa yeni satır ekleyebilirsiniz &#x0a.

Sadece JavaScript kullanın. Daha sonra çoğu ve daha eski tarayıcılarla uyumludur. Yeni satır için çıkış sırasını \ n kullanın.

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

Bu 
 sadece basit bir başlık niteliği kullanırsanız çalışmalıdır.

önyükleme popovers, sadece özniteliğinde data-html="true" html kullanın ve kullanın data-content.

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

Erişilebilirlik ve CR veya satır sonu kullanımı ile daha büyük hale getiren araç ipuçlarının kullanımıyla ilgili bilgilerden, çeşitli tarayıcıların temel konular üzerinde anlaşamayacağı / kabul etmeyeceği gerçeği, erişilebilirlik konusunda çok fazla umursamadıklarını göstermektedir.

W3c web sitesinde yer alan bu makaleye göre :

CDATA, belge karakter kümesindeki bir karakter dizisidir ve karakter öğelerini içerebilir. Kullanıcı aracıları özellik değerlerini aşağıdaki gibi yorumlamalıdır:

• Karakter varlıklarını karakterlerle değiştirin,
• Satır yayınlarını yoksay,
• Her satır başını veya tırnağı tek bir boşlukla değiştirin.

Bu, (en azından) CR ve LF'nin başlık özelliğinin içinde çalışmayacağı anlamına gelir. Bir araç ipucu eklentisi kullanmanızı öneririm. Bu eklentilerin çoğu, rastgele HTML'nin bir öğenin araç ipucu olarak görüntülenmesine izin verir.

Çok daha hoş görünümlü araç ipuçları manuel olarak oluşturulabilir ve HTML biçimlendirmesi içerebilir.

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

Bu, bu konudaki w3schools yayınından alınmıştır . Buradaki yukarıdaki kodla denemeler yapın .

Ustura Sözdizimi

ASP.NET MVC durumunda, başlığı kullanım olarak bir değişken olarak saklayabilirsiniz \r\nve çalışacaktır.

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

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

kesmek ama çalışır - (krom ve mobil cihazlarda test edilmiştir)

sadece kesilene kadar boşluk bırakmayın - içerik miktarına bağlı olarak araç ipucu boyutunu sınırlamanız gerekebilir, ancak küçük metin mesajları için bu işe yarar:

   etc

Yukarıdaki her şeyi denedim ve bu benim için işe yarayan tek şey -

Başlık satırını yeni satırda görüntülemek için "" ile denedim ve bu bir cazibe gibi çalışıyor

Firefox 68.7.0esr kullanıyorum ve 
çalışmıyor. Hatları kırmak <CR>işe yaradı, bu yüzden basit ve ileri olduğu için devam ediyorum. yani

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

kullanın data-html="true"ve uygulayın <br>.