Можно ли добавить html внутри атрибута title?

Question

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

Эта таблица уже использует jQuery datatables, но я не верю, что она может делать такое событие.

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

Answer 1

Nope. Вам нужно будет создать свой собственный заменитель названия с помощью JavaScript.

Answer 2

Родные всплывающие подсказки не используют HTML. jQuery UI всплывающие подсказки были бы очень полезны здесь.

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

EDIT: Вам нужно будет использовать содержание опцию использовать разметку вместо атрибута заголовка.

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

Вот Fiddle демонстрирует это: http://jsfiddle.net/acbabis/64Q2m/

Answer 3

No.

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

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

Answer 4

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

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

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

Answer 5

Вместо того чтобы сосредоточиться на атрибуте 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 */ 

} 

Answer 6

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

Answer 7

Там нет прямого способа сделать 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"); 
        } 
       } 
     }); 
}); 

Answer 8

Использование Bootstrap Tooltips можно сделать следующее

<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() })

docs