Блог

Есть ли способ поместить фактический html-код внутри атрибута заголовка в элементе строки таблицы? Моя цель-показать не только текст, но и некоторую информационную графику вместе с ним, поэтому событие наведения курсора мыши, которое не является модальным, было бы здорово. Я иду не в том направлении?

В этой таблице уже используются таблицы данных jquery, но я не верю, что она может выполнять такого рода события.

 <tr title='This activity will be open to registration on April 31st' >
.....
</tr>
 

Нет. Вам нужно будет создать свою собственную замену заголовка с помощью JavaScript.

Нет.

HTML не может быть помещен в атрибут.

Если цель состоит в том, чтобы иметь всплывающее окно с богатым контентом, то вам нужно обработать это с помощью javascript. Кроме того, с точки зрения доступности, вы, вероятно, все равно не захотите помещать такое количество контента в атрибут title, поэтому использование маршрута JS решит для вас несколько проблем. Google «Подсказка JS» для десятков вариантов.

Собственные всплывающие подсказки не используют HTML. Всплывающие подсказки пользовательского интерфейса jQuery были бы здесь очень полезны.

Демо: http://jqueryui.com/tooltip/

ИЗМЕНИТЬ: Вам нужно будет использовать опцию содержимого, чтобы использовать разметку вместо атрибута заголовка.

 $(".text")
    .tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });
 

Вот скрипка, демонстрирующая это: http://jsfiddle.net/acbabis/64Q2m/

Вы можете использовать плагин всплывающей подсказки jquery ui для отображения пользовательского заголовка

Нет прямого способа отобразить HTML — код, написанный внутри всплывающей подсказки. Однако, если вы используете jQueryUI (или, если можете), то приведенный ниже код покажет HTML-эффект (визуализацию), а не HTML-код во всплывающей подсказке.

Требования: jQuery, jQueryUI.js, jQueryUI.css

HTML-код:

 <tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>
 

язык JavaScript:

 $(function() {
        $( document ).tooltip({
              items: '[title], [data-title]',
              track:true,
              content: function(){
                  var element = $( this );
                    if ( element.is( "[title]" ) ) {
                      return element.attr( "title" );
                    }
                    if ( element.is( "[data-title]" ) ) {
                      return element.attr( "data-title" );
                    }
              }
        });
});
 

Вместо того, чтобы фокусироваться на атрибуте заголовка, вложите всплывающее сообщение с тегами внутри целевого <td></td> объекта (элемент данных таблицы). Затем поместите класс в этот td для управления div с помощью CSS, сначала скрыв его, а затем сделав его содержимое видимым при наведении курсора мыши на конкретный элемент данных таблицы. Что-то вроде этого:

 <tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>
 

Тогда ваш CSS может быть чем-то вроде:

 td.info-tooltip div {

display:none;

}

td.info-tooltip:hover {

position:relative;
cursor:pointer; 

}

td.info-tooltip:hover div {

position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block; 
width: 500px; /* give this your own width */

}
 

Используя всплывающие подсказки начальной загрузки, можно сделать следующее

<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>

для меня это происходит автоматически, но вам, возможно, потребуется запустить его с помощью javascript.

$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

Документы

Я думаю, что хороший вариант-поместить это содержимое в атрибут данных, что-то вроде этого:

 <div data-tooltip="Some information I want to show">
    Actual content
</div>
 

А затем напишите простой плагин jQuery, который показывает содержимое внутри элемента при наведении курсора.