Jquery UI 툴팁은 html 콘텐츠를 지원하지 않습니다.

오늘 저는 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&nbsp;</b> a tooltip<br/>
        <b>This is&nbsp;</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="&lt;div&gt;check out these kool &lt;i&gt;italics&lt;/i&gt; and this &lt;span style=&quot;color:red&quot;&gt;red text&lt;/span&gt;&lt;/div&gt;">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);
                 }
             }
         });
     });

위의 게시물 및 솔루션에 감사드립니다.

코드를 약간 업데이트했습니다. 이것이 당신을 도울 수 있기를 바랍니다.

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의 툴팁을 사용하는 데 어려움을 겪고 있다면 이것은 견고한 솔루션으로 보입니다.

에서 http://bugs.jqueryui.com/ticket/9019

title 속성에 HTML을 넣는 것은 유효한 HTML이 아니며 이제 XSS 취약성을 방지하기 위해 이스케이프 처리 중입니다 ( # 8861 참조 ).

툴팁에 HTML이 필요한 경우 콘텐츠 옵션 ( http://api.jqueryui.com/tooltip/#option-content)을 사용 하세요 .

javascript를 사용하여 html 툴팁을 설정하십시오. 아래를 참조하십시오.

$( ".selector" ).tooltip({
   content: "Here is your HTML"
});

소스 코드 '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>

또 다른 해결책은 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/

위의 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 이것은 나를 위해 작동합니다.

$(document).ready(function()
{
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]',
        html: true
     });
});

Html 마크 업

".why"클래스가있는 도구 설명 컨트롤 및 ".customTolltip"클래스가있는 도구 설명 콘텐츠 영역

$(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(/&lt;br *\/?&gt;/, "<br/>");
    },
});

툴팁 옵션에 html = true 추가

$({selector}).tooltip({html: true});

업데이트
는 jQuery UI 툴팁 속성과 관련이 없습니다. 부트 스트랩 UI 툴팁에서는 사실입니다.