툴팁 내에 줄 바꿈 추가
HTML 툴팁 내에 줄 바꿈을 어떻게 추가 할 수 있습니까?
다음과 같이 툴팁을 사용 <br/>하고 \n툴팁 내에서 시도했습니다 .
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
그러나 이것은 쓸모가 없었으며 리터럴 텍스트 <br/>와 \n툴팁을 볼 수있었습니다 . 어떤 제안이라도 도움이 될 것입니다.

제목 속성에서 줄 바꿈에 엔티티 코드 를 사용하십시오 .

스타일과 결합 공백 : 전 라인; 나를 위해 일했다.
데이터 속성을 추가하기 만하면됩니다
data-html = "true"
그리고 당신은 잘 지내요.
예 : 용법:
<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>
그것은 내가 지금 시도한 툴팁 플러그인의 대부분에서 작동했습니다.
이 CSS는 편집기에서 줄 바꿈과 함께 마침내 작동했습니다.
.tooltip-inner {
white-space: pre-wrap;
}
여기에서 찾을 수 있습니다 : 트위터 부트 스트랩 툴팁을 여러 줄로 만들려면?
\n텍스트 사이에 제공 하십시오. 모든 브라우저에서 작동합니다.
Example
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";
이것은 저에게 효과적이며 코드 뒤에 사용됩니다.
희망이 당신을 위해 작동합니다
\n
스타일링
.tooltip-inner {
white-space: pre-line;
}
나를 위해 일했다.
찾았어요. 이렇게하면 간단히 할 수 있습니다
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
자바 스크립트 버전
이후 
(HTML) 인 0D(16 진수), 이것은으로 표현 될 수있다'\u000d'
str = str.replace(/\n/g, '\u000d');
게다가,
다른 답변 의 참조 덕분에 해당 문자로 대체 되는 AngularJS 필터 를 여러분과 공유 \n하십시오.
app.filter('titleLineBreaker', function () {
return function (str) {
if (!str) {
return str;
}
return str.replace(/\n/g, '\u000d');
};
});
용법
<div title="{{ message | titleLineBreaker }}"> </div>
<br /> qTip을 사용하는 경우 작동했습니다
제목 속성을 여러 줄로 펼치면 기본 HTML 툴팁 내에 줄 바꿈을 추가 할 수 있습니다.
그러나 Q-Tip : http://craigsworks.com/projects/qtip/ 과 같은 jQuery 툴팁 플러그인을 사용하는 것이 좋습니다 .
설정 및 사용이 간단합니다. 또는 무료 자바 스크립트 툴팁 플러그인이 많이 있습니다.
편집 : 첫 번째 진술에 대한 수정.
나에게 2 단계 솔루션 (제목 서식 지정 및 스타일 추가 조합)은 다음과 같이 작동했습니다.
1) title속성을 형식화하십시오.
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
2)이 스타일을 tips요소에 추가하십시오 .
white-space: pre-line;
IE8, Firefox 22 및 Safari 5.1.7에서 테스트되었습니다.
data-html = "true"만 추가하십시오.
<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
제목에 \ n을 사용 하고이 CSS를 추가하십시오.
.tooltip-inner {
white-space: pre-wrap;
}
Jquery Tooltip utility를 사용하는 경우 "jquery-ui.js"Javascript 파일에서 다음 텍스트를 찾으십시오.
tooltip.find(".ui-tooltip-content").html(content);
그리고 그 위에 넣어
content=content.replace(/\</g,'<').replace(/\>/g,'>');
이것이 당신에게도 효과가 있기를 바랍니다.
사용 이 작동해야합니다 ( Chrome , Firefox 및 Edge 에서 테스트했습니다 ).
let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
favTitle += users[j].username + " ";
$("#item").append('<i title="In favorite users: ' + favTitle + '">Favorite</i>');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>Just add this code snippet in your script:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
and ofcourse as mentioned in above answers the data-html should be "true". This will allow you to use html tags and formatting inside the value of title attribute.
The solution for me was http://jqueryui.com/tooltip/:
And here the code (the part of script that make <br/> Works is "content:"):
HTML HEAD
<head runat="server">
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
/*Position:
my => at
at => element*/
$(function () {
$(document).tooltip({
content: function() {
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
},
position: { my: "left bottom-3", at: "center top" } });
});
</script>
</head>
ASPX or HTML control
<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>
Hope this help someone
Grater than Jquery UI 1.10 is not support to use html tag inside of the title attribute because its not valid html.
So the alternative solution is to use tooltip content option. Refer - http://api.jqueryui.com/tooltip/#option-content
Use

There shouldn't be any ; character.
if you are using jquery-ui 1.11.4:
var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
content: function() {
// support: IE<9, Opera in jQuery <1.7
// .text() can't accept undefined, so coerce to a string
var title = $( this ).attr( "title" ) || "";
// Escape title, since we're going from an attribute to raw HTML
Replace--> //return $( "<a>" ).text( title ).html();
by --> return $( "<a>" ).html( title );
},
AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:
uib-tooltip, uib-tooltip-template and uib-tooltip-html
- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template
In my case, I opted for uib-tooltip-html and there are three parts to it:
- configuration
- controller
- HTML
Example:
(function(angular) {
//Step 1: configure $sceProvider - this allows the configuration of $sce service.
angular.module('myApp', ['uib.bootstrap'])
.config(function($sceProvider) {
$sceProvider.enabled(false);
});
//Step 2: Set the tooltip content in the controller
angular.module('myApp')
.controller('myController', myController);
myController.$inject = ['$sce'];
function myController($sce) {
var vm = this;
vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
'I am the second line-break');
return vm;
}
})(window.angular);
//Step 3: Use the tooltip in HTML (UI)
<div ng-controller="myController as get">
<span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>
For more information, please check here
Using .html() instead of .text() worked for me. For example
.html("This is a first line." + "<br/>" + "This is a second line.")
Just use the entity code 
 for a linebreak in a title attribute.
<a title="First Line 
Second Line">Hover Me </a>This css will help you.
.tooltip {
word-break: break-all;
}
or if you want in one line
.tooltip-inner {
max-width: 100%;
}
참고URL : https://stackoverflow.com/questions/3340802/add-line-break-within-tooltips
'Programing' 카테고리의 다른 글
| Eclipse에서 AVD 에뮬레이터의 크기를 조정하는 방법은 무엇입니까? (0) | 2020.06.12 |
|---|---|
| Android에서 로그 수준을 활성화 / 비활성화하는 방법 (0) | 2020.06.12 |
| 새로운 NavigationView에서 간단한 디바이더를 만드는 방법은 무엇입니까? (0) | 2020.06.12 |
| jQuery를 사용하여 앵커를 활성화 또는 비활성화하는 방법은 무엇입니까? (0) | 2020.06.12 |
| 파이썬에서 IP 주소를 확인하는 방법? (0) | 2020.06.12 |