79

Вопрос по jquery-ui-tooltip, jquery, jquery-ui, html – Подсказка по интерфейсу Jquery не поддерживает HTML-контент

Сегодня я обновил все свои подключаемые модули jQuery с помощью jQuery 1.9.1. И я начал использовать всплывающую подсказку jQueryUI с jquery.ui.1.10.2. Все было хорошо. Но когда я использовал теги HTML в контенте (вtitle атрибут элемента, к которому я применил всплывающую подсказку), я заметил, что HTML не поддерживается.

Это скриншот моей подсказки:

Как заставить контент HTML работать с подсказкой jQueryUI в 1.10.2?

@ Эндрю Уитакер сказал отлично. Мой вопрос может быть недостаточно ясным. Потому что английский не мой родной язык. Да, я использую HTML в атрибуте title. И теперь я проверил это. Когда я понижал версию jquery.ui 1.9.2, она работала нормально. Поэтому я понял, что использование HTML в атрибуте title не поддерживается версией 1.10.2. Большое спасибо всем, кто ответил.

от user1372430

в демо я упоминал в комментарии?

от SachinGutte

@ Фобос: Нет, это не такт. Есть теги прямо в подсказке.

от Andrew Whitaker

см. метадепты обновленной скрипки с jquery ui 1.10.2Вот и JQuery 1.9.1. Это все еще работает.

от SachinGutte
13 ответов
173

редактировать: Так как это оказалось популярным ответом, ядобавив отказ от ответственности,@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');
        }
    }
});

Теперь каждый раз, когда вы звоните.tooltip, HTML контент будет возвращен.

Пример: http://jsfiddle.net/Aa5nK/14/

@crush, что это будет за причина? Просто для потомков ...

от eidylon

Да благословит вас Господь, человек !!! : D

от user3130064

большое спасибо вам.

от strongBAD

Вы могли бы иметь текстовую часть контента в атрибуте title и затем встроить окружающие биты HTML в ваш обратный вызов контента, чтобы обойти это (если вы знали, что это будет во время инициализации)

от jinglesthula
1

От

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

Помещение HTML в атрибут title не является допустимым HTML, и теперь мы используем его для предотвращения уязвимостей XSS (см.# 8861).

Если вам нужен HTML в ваших подсказках, используйте опцию содержимого -http://api.jqueryui.com/tooltip/#option-content.

Попробуйте использовать JavaScript для установки всплывающих подсказок HTML, см. Ниже

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

добавить html = true к параметрам всплывающей подсказки$({selector}).t

добавить html = true к параметрам всплывающей подсказки

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

Обновить

Это'не относится к свойству всплывающей подсказки jQuery ui - это 'Это правда в начальной загрузке - моя плохая!

Извините, это нея не работаю Там также нет упоминания о "HTML» вариант в официальной документации.

от Wireblue

Это подсказка для начальной загрузки 2.3, а не для jquery-ui.

от Maciej Pyszyński

нет опорыHTML» для всплывающей подсказки

от AmirHossein

+1 за ваше обновление :)

от RezaSh
2

Чтобы избежать размещения тегов HTML в атрибуте title

другое решение заключается в использовании уценки. Например, вы можете использовать [br], чтобы представить разрыв строки, а затем выполнить простую замену в функции содержимого.

В заголовке атрибута:

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

В вашемфункция содержимого:

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

Чтобы расширить на @Andrew Whitaker &#39

Ответ выше, вы можете преобразовать всплывающую подсказку в html-сущности внутри тега title, чтобы избежать размещения необработанного 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>
13

Я решил это с помощью специального тега данных

потому что атрибут заголовка требуется в любом случае.

$("[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, и всплывающие подсказки отображаются только для разыскиваемых тегов.

+1 за то, что не сломал существующий атрибут заголовка.

от Heinzi
1

Пока мыповторно использовать jQuery (&gt

 v1.8), мы можем проанализировать входящую строку с помощью $ .parseHTML ().

$('.tooltip').tooltip({
    content: function () {
        var tooltipContent = $('').html( $.parseHTML( $(this).attr('title') ) );
        return tooltipContent;
    },
}); 

Мы'проанализирую входящую строкуАтрибут s для неприятных вещей, затем преобразуйте его обратно в jQuery-читаемый HTML. Прелесть этого в том, что к моменту попадания в синтаксический анализатор строки уже объединены, поэтомуне имеет значения, если кто-то пытается разделить тег сценария на отдельные строки. Если ты'застрял с помощью jQuery 'с подсказками, это, кажется, твердое решение.

0

HTML-разметка

Tool-tip Control с классом ".Зачем"и область содержимого всплывающей подсказки с классом ".customTolltip»

$(function () {
                $('.why').attr('title', function () {
                    return $(this).next('.customTolltip').remove().html();
                });
                $(document).tooltip();
            });
4

Вы также можете достичь этого полностью без jQueryUI с помощью стилей

CSS. Смотрите фрагмент ниже:

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>

Первый диапазон для отображаемого текста, второй диапазон для скрытого текста, который отображается при наведении на него курсора.

1

спасибо за пост и решение выше.

$(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);
                     $("")
                         .addClass("arrow")
                         .addClass(feedback.vertical)
                         .addClass(feedback.horizontal)
                         .appendTo(this);
                 }
             }
         });
     });

Я немного обновил код. Надеюсь, это поможет вам.

http://jsfiddle.net/pragneshkaria/Qv6L2/49/

1

Другим решением будет захват текста внутри$(function() {

Другим решением будет захват текста внутриtitle тег & затем используйте.html() метод jQuery для построения содержимого всплывающей подсказки.

$(function() {
  $(document).tooltip({
    position: {
      using: function(position, feedback) {
        $(this).css(position);
        var txt = $(this).text();
        $(this).html(txt);
        $("")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });
});

Пример: http://jsfiddle.net/hamzeen/0qwxfgjo/

14

Вместо этого:$(document).tooltip({

Вместо этого:

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

используйте это для лучшей производительности

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

Этот ответ должен быть принятым.

от julien

да, лучшая производительность, потому что у меня есть только несколько элементов с подсказками

от datdinhquoc

Работает отлично

от Helpha
1

Вы можете изменить исходный кодJQuery-ui.js&#39

 найти эту функцию по умолчанию для получения целевого элемента 'Содержание атрибута заголовка.

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();
    },
</a>

изменить на

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();
    },
</a>

таким образом, всякий раз, когда вы хотите отобразить подсказки HTML, просто добавьте атрибут ignoreHtml = 'ложный' на вашем целевом элементе HTML; как этоdisplay content

Похожие вопросы