오늘 저는 jQuery 1.9.1로 모든 jQuery 플러그인을 업그레이드했습니다. 그리고 jquery.ui.1.10.2에서 jQueryUI 툴팁을 사용하기 시작했습니다. 모든 것이 좋았습니다. 그러나 콘텐츠 ( title툴팁을 적용한 요소 의 속성)에 HTML 태그를 사용했을 때 HTML이 지원되지 않는다는 것을 알았습니다.
이것은 내 툴팁의 스크린 샷입니다.
1.10.2에서 jQueryUI 툴팁을 사용하여 HTML 콘텐츠를 어떻게 작동시킬 수 있습니까?
답변
편집 : 이것은 인기있는 답변으로 판명되었으므로 @crush가 아래 댓글에서 언급 한 면책 조항을 추가합니다 . 이 해결 방법을 사용 하는 경우 XSS 취약성에 대해 스스로를 개방하고 있다는 점에 유의하십시오 . 수행중인 작업 을 알고 있고 속성의 HTML 컨텐츠를 확신 할 수있는 경우에만이 솔루션을 사용하십시오 .
이를 수행하는 가장 쉬운 방법 content은 기본 동작을 재정의하는 옵션에 함수를 제공하는 것입니다.
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
예 : http://jsfiddle.net/Aa5nK/12/
또 다른 옵션은 옵션을 변경하는 도구 설명 위젯을 자신의 것으로 재정의하는 것입니다 content.
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
이제를 호출 할 때마다 .tooltipHTML 콘텐츠가 반환됩니다.
예 : http://jsfiddle.net/Aa5nK/14/
답변
대신 :
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
더 나은 성능을 위해 이것을 사용하십시오
$(selector).tooltip({
content: function () {
return this.getAttribute("title");
},
});
답변
어쨌든 제목 속성이 필요하기 때문에 사용자 지정 데이터 태그로 해결했습니다.
$("[data-tooltip]").each(function(i, e) {
var tag = $(e);
if (tag.is("[title]") === false) {
tag.attr("title", "");
}
});
$(document).tooltip({
items: "[data-tooltip]",
content: function () {
return $(this).attr("data-tooltip");
}
});
이와 같이 html 준수이며 툴팁은 원하는 태그에 대해서만 표시됩니다.
답변
CSS 스타일을 사용하여 jQueryUI 없이도이를 완전히 달성 할 수 있습니다. 아래 스 니펫을 참조하세요.
div#Tooltip_Text_container {
max-width: 25em;
height: auto;
display: inline;
position: relative;
}
div#Tooltip_Text_container a {
text-decoration: none;
color: black;
cursor: default;
font-weight: normal;
}
div#Tooltip_Text_container a span.tooltips {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.2s, opacity 0.2s linear;
position: absolute;
left: 10px;
top: 18px;
width: 30em;
border: 1px solid #404040;
padding: 0.2em 0.5em;
cursor: default;
line-height: 140%;
font-size: 12px;
font-family: 'Segoe UI';
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 7px 7px 5px -5px #666;
-webkit-box-shadow: 7px 7px 5px -5px #666;
box-shadow: 7px 7px 5px -5px #666;
background: #E4E5F0 repeat-x;
}
div#Tooltip_Text_container:hover a span.tooltips {
visibility: visible;
opacity: 1;
transition-delay: 0.2s;
}
div#Tooltip_Text_container img {
left: -10px;
}
div#Tooltip_Text_container:hover a span.tooltips {
visibility: visible;
opacity: 1;
transition-delay: 0.2s;
}<div id="Tooltip_Text_container">
<span><b>Tooltip headline</b></span>
<a href="#">
<span class="tooltips">
<b>This is </b> a tooltip<br/>
<b>This is </b> another tooltip<br/>
</span>
</a>
<br/>Move the mousepointer to the tooltip headline above.
</div>첫 번째 범위는 표시된 텍스트를위한 것이고 두 번째 범위는 숨겨진 텍스트를위한 것이며 마우스를 가져 가면 표시됩니다.
답변
위의 @Andrew Whitaker의 답변을 확장하려면 속성에 원시 html을 직접 넣지 않도록 제목 태그 내에서 도구 설명을 html 엔티티로 변환 할 수 있습니다.
$('div').tooltip({
content: function () {
return $(this).prop('title');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="tooltip" title="<div>check out these kool <i>italics</i> and this <span style="color:red">red text</span></div>">Hover Here</div>종종 툴팁은 어쨌든 PHP 변수에 저장되므로 다음 만 필요합니다.
<div title="<?php echo htmlentities($tooltip); ?>">Hover Here</div>
답변
제목 속성에 HTML 태그를 배치하지 않으려면 마크 다운을 사용하는 방법도 있습니다. 예를 들어 [br]을 사용하여 줄 바꿈을 표시 한 다음 내용 함수에서 간단한 바꾸기를 수행 할 수 있습니다.
제목 속성 :
"Sample Line 1[br][br]Sample Line 2"
당신의에서 컨텐츠 기능 :
content: function () {
return $(this).attr('title').replace(/\[br\]/g,"<br />");
}
답변
$(function () {
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$('[rel=tooltip]').tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
위의 게시물 및 솔루션에 감사드립니다.
코드를 약간 업데이트했습니다. 이것이 당신을 도울 수 있기를 바랍니다.
