HTML 툴팁에서 캐리지 리턴을 어떻게 사용할 수 있습니까?
https://stackoverflow.com/questions/358874
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 현재 우리 사이트에 Verbose Tooltip을 추가하고 있으며 (Whizz-Bang JQuery 플러그인에 의지하지 않고도 많은 것을 알고 싶지 않습니다!) Carriage Return을 사용하여 툴팁 형식을 형성합니다.
내가 사용하는 팁을 추가하기 위해 title 기인하다. 나는 일반적인 사이트를 둘러보고 다음의 기본 템플릿을 사용했습니다.
<a title='Tool?Tip?On?New?Line'>link with tip</a>
나는 교체를 시도했다 ? 와 함께:
<br />&013; / \r\nEnvironment.NewLine(나는 C#을 사용하고있다)
위의 작품 중 어느 것도 작동하지 않습니다. 가능합니까?
해결책
너무 간단합니다.
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefox는 멀티 라인 툴팁을 전혀 표시하지 않습니다. 최신 라인을 아무것도 대체하지 않습니다.
다른 팁
그만큼 최신 사양 라인 피드 문자를 허용하므로 속성 또는 엔터티 내부에서 간단한 라인이 나옵니다. (캐릭터에 유의하십시오 # 그리고 ; 필요) 괜찮습니다.
캐릭터 10을 시도해보십시오. 그래도 Firefox에서는 작동하지 않습니다. :(
텍스트는 브라우저 종속 방식으로 (경우) 표시됩니다. 작은 툴팁은 대부분의 브라우저에서 작동합니다. IE 및 Safari의 긴 툴팁과 라인 브레이킹 작업 (사용
또는 새로운 Newline의 경우). Firefox와 Opera는 Newlines를 지원하지 않습니다. Firefox는 긴 툴팁을 지원하지 않습니다.
http://modp.com/wiki/htmltitletooltips
업데이트:
2015 년 1 월 현재 Firefox는 사용을 지원합니다 HTML에 라인 브레이크를 삽입하려면 title 기인하다. 아래 스 니펫 예제를 참조하십시오.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>IE, Chrome, Safari, Firefox (최신 버전 2012-11-27)에서 이것을 테스트했습니다.
그들 모두에서 일합니다 ...
또한 JavaScript로 제목 속성을 설정하는 경우 다음과 같이 언급 할 가치가 있습니다.
divElement.setAttribute("title", "Line one Line two");
작동하지 않습니다. ascii 10 진수 10을 JavaScript로 탈출하는 방식으로 ASCII 16 진수 A로 교체해야합니다. 이와 같이:
divElement.setAttribute("title", "Line one\x0ALine two");
Firefox 12에서 현재 그들은 선 피드 HTML 엔티티를 사용하여 라인 브레이크를 지원합니다.
<span title="First line Second line">Test</span>
이것은 IE에서 작동하며 HTML5 사양에 따라 정확합니다. 제목 속성.
jQuery를 사용하는 경우 :
$(td).attr("title", "One \n Two \n Three");
작동합니다.
IE-9에서 테스트 : 작업.
에 대한 기여로 
 해결책, 우리는 또한 사용할 수 있습니다 	 이런 일을 해야하는 경우 탭의 경우.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>데모
나는 파티에 늦었다는 것을 알고 있지만,이 일을보고 싶어하는 사람들을 위해 여기에 데모가 있습니다. 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>
모든 메이저 브라우저에서 작동합니다 (즉, 포함)
우리는이 모든 것을 테스트해야 할 필요가있었습니다. 여기에 내가 공유하고 싶은 것이 있습니다.
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/>나는 그것이 믿지 않는다. Firefox 2는 어쨌든 긴 링크 제목을 다듬으며 실제로 소량의 도움말 텍스트를 전달하는 데만 사용해야합니다. 더 많은 설명 텍스트가 필요하면 링크와 관련된 단락에 속해 있다고 제안합니다. 그런 다음 툴팁 JavaScript 코드를 추가하여 해당 단락을 숨기고 호버의 툴팁으로 표시 할 수 있습니다. 그것이 크로스 브라우저 IMO를 작동시키는 데 가장 좋은 방법입니다.

 <---- 이것은 Carry Return을 삽입하는 데 필요한 텍스트입니다.
Chrome 16 및 아마도 이전 버전에서는 " n"을 사용할 수 있습니다. 사이드 인으로서 " t"도 작동합니다.
누구에 대해 작동하지 않았을 때 라인이 보이는 요소를 다음과 같이 표시해야합니다. white-space: pre-line;
이 답변에서 참조 : https://stackoverflow.com/a/17172412/1460591
이것 만 사용하십시오 :
<a title='Tool
Tip
On
New
Line'>link with tip</a>
이것을 사용하여 제목에 새 라인을 추가 할 수 있습니다. 
.
JavaScript 만 사용하십시오. 그런 다음 대부분의 및 오래된 브라우저와 호환됩니다. Newline에는 이스케이프 시퀀스 n을 사용하십시오.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
CR 또는 라인 브레이크를 사용하여 접근성 및 툴팁을 사용하는 정보에 대한 정보에 대한 정보에 대해, 다양한 브라우저가 기본에 동의 할 수 없다는 사실은 접근성에 대해별로 신경 쓰지 않는다는 것을 보여줍니다.
이것에 따르면 W3C 웹 사이트의 기사:
CDATA는 문서 문자 세트의 일련의 문자이며 캐릭터 엔티티를 포함 할 수 있습니다. 사용자 에이전트는 속성 값을 다음과 같이 해석해야합니다.
- 캐릭터 엔티티를 문자로 바꾸고
- 선 피드를 무시하고
- 각 캐리지 리턴 또는 탭을 단일 공간으로 교체하십시오.
이것은 (적어도) CR과 LF가 타이틀 속성 내부에서 작동하지 않음을 의미합니다. 툴팁 플러그인을 사용하는 것이 좋습니다. 이 플러그인의 대부분은 임의의 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>
해킹이지만 작동 - (Chrome 및 Mobile에서 테스트)
끊어 질 때까지 브레이크 공간을 추가하지 마십시오. 콘텐츠의 양에 따라 툴팁 크기를 제한해야 할 수도 있지만 작은 문자 메시지의 경우 다음과 같습니다.
etc
위의 모든 것을 시도했는데 이것이 나를 위해 일한 유일한 것입니다.
사용 data-html="true" 그리고 적용하십시오 <br>.
