Jquery UI 도구 설명이 HTML 콘텐츠를 지원하지 않습니다.
오늘 jQuery 1.9.1로 모든 jQuery 플러그인을 업그레이드했습니다.그리고 jQuery.ui.1.10.2와 함께 jQueryUI 툴팁을 사용하기 시작했습니다.모든 것이 좋았습니다.때 (" ▁the때()"에서title툴팁을 적용하던 요소의 속성), 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 스타일을 사용하여 jQuery UI 없이도 이를 완전히 달성할 수 있습니다.아래의 스니펫을 참조하십시오.
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>첫 번째 범위는 표시된 텍스트에 대한 것이고 두 번째 범위는 숨겨진 텍스트에 대한 것입니다. 두 번째 범위는 해당 텍스트 위에 마우스를 놓으면 표시됩니다.
출처: http://bugs.jqueryui.com/ticket/9019
제목 속성에 HTML을 넣는 것은 유효한 HTML이 아니므로 XSS 취약성을 방지하기 위해 이를 회피하고 있습니다(#8861 참조).
도구 설명에 HTML이 필요한 경우 컨텐츠 옵션 - http://api.jqueryui.com/tooltip/ #option-content를 사용합니다.
자바스크립트를 사용하여 html 툴팁을 설정해 보십시오. 아래를 참조하십시오.
$( ".selector" ).tooltip({
content: "Here is your HTML"
});
위의 @Andrew Whitaker의 답변을 확장하려면 툴팁을 제목 태그 내의 html 엔티티로 변환하여 Raw 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 />");
}
또 다른 해결책은 내부의 텍스트를 잡는 것입니다.title태그를 지정한 후 사용.html()도구 설명의 내용을 구성하는 jQuery 메서드입니다.
$(function() {
$(document).tooltip({
position: {
using: function(position, feedback) {
$(this).css(position);
var txt = $(this).text();
$(this).html(txt);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
예: http://jsfiddle.net/hamzeen/0qwxfgjo/
$(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);
}
}
});
});
위의 게시물과 해결책에 감사드립니다.
코드를 조금 업데이트했습니다.이것이 당신에게 도움이 되길 바랍니다.
http://jsfiddle.net/pragneshkaria/Qv6L2/49/
jQuery(> v1.8)를 사용하는 한 $.parseHTML()로 들어오는 문자열을 구문 분석할 수 있습니다.
$('.tooltip').tooltip({
content: function () {
var tooltipContent = $('<div />').html( $.parseHTML( $(this).attr('title') ) );
return tooltipContent;
},
});
수신 문자열의 속성을 구문 분석한 다음 jQuery에서 읽을 수 있는 HTML로 다시 변환합니다. 이 기능의 장점은 문자열이 파서에 도달할 때까지 이미 연결되어 있기 때문에 스크립트 태그를 다른 문자열로 분할하려는 사람이 있어도 문제가 되지 않는다는 것입니다.jQuery의 툴팁을 사용하는 데 어려움이 있다면 이는 확실한 해결책으로 보입니다.
소스 코드 'jquery-ui.js'를 수정할 수 있으며, 대상 요소의 제목 속성 내용을 검색하기 위한 이 기본 함수를 찾을 수 있습니다.
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
return $( "<a>" ).text( title ).html();
},
로 변경합니다.
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
if($(this).attr('ignoreHtml')==='false'){
return $(this).prop("title");
}
var title = $( this ).attr( "title" ) || "";
// Escape title, since we're going from an attribute to raw HTML
return $( "<a>" ).text( title ).html();
},
따라서 html 팁을 표시하고 싶을 때마다, 당신의 목표 html 요소에 ignoreHtml='false' 속성을 추가하세요; 이와 같이. <td title="<b>display content</b><br/>other" ignoreHtml='false'>display content</td>
위의 어떤 해결책도 저에게 효과가 없었습니다.이것은 나에게 효과가 있습니다.
$(document).ready(function()
{
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html: true
});
});
HTML 마크업
클래스 ".why"가 있는 도구 설명 컨트롤과 클래스 ".custom"이 있는 도구 설명 내용 영역입니다.톨팁"
$(function () {
$('.why').attr('title', function () {
return $(this).next('.customTolltip').remove().html();
});
$(document).tooltip();
});
교체\n아니면 탈출한 사람들<br/>HTML의 나머지 부분을 이스케이프 상태로 유지하면서 트릭을 수행합니다.
$(document).tooltip({
content: function() {
var title = $(this).attr("title") || "";
return $("<a>").text(title).html().replace(/<br *\/?>/, "<br/>");
},
});
도구 설명 옵션에 html = true 추가
$({selector}).tooltip({html: true});
갱신하다
jQueryui 툴팁 속성과 관련이 없습니다. 부트스트랩 UI 툴팁에 해당됩니다. 죄송합니다!
언급URL : https://stackoverflow.com/questions/15734105/jquery-ui-tooltip-does-not-support-html-content
'programing' 카테고리의 다른 글
| 공백/빈 공간의 유효성을 검사하는 방법은 무엇입니까?[각도 2] (0) | 2023.09.04 |
|---|---|
| @Cacheable 히트 시 스프링 캐시 로깅 (0) | 2023.09.04 |
| WebKit/Blink에서 MacOS 트랙패드 사용자의 스크롤 막대 숨기기 방지 (0) | 2023.09.04 |
| Chrome Developer 도구를 통해 Ajax 통화의 HTML 응답 보기? (0) | 2023.09.04 |
| Magento - 사용자 입력에 따른 제품 항목 속성 견적/주문 (0) | 2023.09.04 |