HTML 툴팁에서 캐리지 리턴을 어떻게 사용합니까?

현재 사이트에 자세한 툴팁을 추가하고 있으며 캐리지 리턴을 사용하여 툴팁 형식을 지정하고 싶습니다 (whizz-bang jQuery 플러그인에 의지하지 않고 많은 것을 알고 있습니다!).

팁을 추가하려면 title속성을 사용하고 있습니다. 일반적인 사이트를 둘러보고 기본 템플릿을 사용했습니다.

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

로 바꾸려고 ?했습니다.

• <br />
• &013; / 

• \r\n
• Environment.NewLine (저는 C #을 사용하고 있습니다)

위의 어느 것도 작동하지 않습니다. 가능합니까?

너무 간단해서 직접 킥할 수 있습니다 ... 그냥 엔터를 누르십시오!

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

Firefox는 여러 줄 툴팁을 전혀 표시하지 않습니다. 개행을 아무것도 대체하지 않습니다.

최신 사양은 속성이나 단체 내부의 간단한 줄 바꿈 때문에, 줄 바꿈 문자를 할 수 있습니다 
(문자주의 #와이 ;필요)를 확인합니다.

캐릭터 10을 사용해보십시오. Firefox에서는 작동하지 않습니다. :(

텍스트는 브라우저에 따라 다르게 표시됩니다. 작은 툴팁은 대부분의 브라우저에서 작동합니다. IE 및 Safari에서 긴 툴팁 및 줄 바꿈 작업 ( 새 줄 바꿈 
또는 사용 
). Firefox 및 Opera는 줄 바꾸기를 지원하지 않습니다. Firefox는 긴 툴팁을 지원하지 않습니다.

http://modp.com/wiki/htmltitletooltips

최신 정보:

2015 년 1 월 현재 Firefox는 
HTML title속성 에 줄 바꿈을 삽입하는 기능을 지원 합니다. 아래의 스 니펫 예제를 참조하십시오.

<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로 title 속성을 설정하는 경우 언급 할 가치가 있습니다.

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

작동하지 않습니다. Javascript로 이스케이프 처리되는 방식으로 ASCII 10 진수 10을 ASCII 16 진수 A로 바꿔야합니다. 이처럼 :

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

Firefox 12부터는 줄 바꿈 HTML 엔티티를 사용하여 줄 바꿈을 지원합니다. 


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

이것은 IE에서 작동하며 title 속성에 대한 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"을 사용할 수 있습니다. 참고로 "\ 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>

this를 사용하여 제목에 줄 바꿈을 추가 할 수 있습니다 &#x0a.

JavaScript 만 사용하십시오. 그런 다음 대부분 및 이전 브라우저와 호환됩니다. 줄 바꿈에는 이스케이프 시퀀스 \ n을 사용하십시오.

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

이것은 
당신이 단순한 제목 속성을 사용하는 경우 작동합니다.

부트 스트랩 팝 오버의 data-html="true" 경우 data-content속성 에서 html을 사용 하고 사용하십시오 .

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

해킹하지만 작동-(크롬 및 모바일에서 테스트)

끊어 질 때까지 나누기 공간을 추가하지 마십시오. 내용의 양에 따라 툴팁 크기를 제한해야 할 수도 있지만 작은 문자 메시지의 경우 작동합니다.

   etc

위의 모든 것을 시도했지만 이것이 나를 위해 일한 유일한 것입니다.

제목 줄을 새 줄에 표시하기 위해 ""(으)로 시도했으며 매력처럼 작동합니다.

파이어 폭스 68.7.0esr에 있는데 
작동하지 않습니다. 통해 줄을 끊는 것은 <CR>효과가 있었으므로 간단하고 앞으로 계속 진행하고 있습니다. 즉

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

사용 data-html="true"하고 적용하십시오 <br>.