jquery

Question 1

오늘 저는 jQuery 1.9.1로 모든 jQuery 플러그인을 업그레이드했습니다. 그리고 jquery.ui.1.10.2에서 jQueryUI 툴팁을 사용하기 시작했습니다. 모든 것이 좋았습니다. 그러나 콘텐츠 ( title툴팁을 적용한 요소 의 속성)에 HTML 태그를 사용했을 때 HTML이 지원되지 않는다는 것을 알았습니다.

이것은 내 툴팁의 스크린 샷입니다.

여기에 이미지 설명 입력

1.10.2에서 jQueryUI 툴팁을 사용하여 HTML 콘텐츠를 어떻게 작동시킬 수 있습니까?

Question 2

편집 : 이것은 인기있는 답변으로 판명되었으므로 @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/

Question 3

대신 :

$(document).tooltip({
    content: function () {
        return $(this).prop('title');
    }
});

더 나은 성능을 위해 이것을 사용하십시오

$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});

Question 4

어쨌든 제목 속성이 필요하기 때문에 사용자 지정 데이터 태그로 해결했습니다.

$("[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 준수이며 툴팁은 원하는 태그에 대해서만 표시됩니다.

Question 5

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>

스 니펫 확장

첫 번째 범위는 표시된 텍스트를위한 것이고 두 번째 범위는 숨겨진 텍스트를위한 것이며 마우스를 가져 가면 표시됩니다.

Question 6

위의 @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>

Question 7

제목 속성에 HTML 태그를 배치하지 않으려면 마크 다운을 사용하는 방법도 있습니다. 예를 들어 [br]을 사용하여 줄 바꿈을 표시 한 다음 내용 함수에서 간단한 바꾸기를 수행 할 수 있습니다.

제목 속성 :

"Sample Line 1[br][br]Sample Line 2"

당신의에서 컨텐츠 기능 :

content: function () {
    return $(this).attr('title').replace(/\[br\]/g,"<br />");
}

Question 8

$(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/