Ответ 1
Используйте параметр content, предоставленный tooltip
$(function(){
$('[title]').tooltip({
content: function(){
var element = $( this );
return element.attr('title')
}
});
});
Демо: Plunker
Почему JQuery Tooltip не показывает содержимое html?
Я создал подсказку jQuery на странице html. Я хочу показать всплывающую подсказку с содержимым html внутри гиперссылки. Но JQuery Tooltip просто показывает весь текст html как обычный текст внутри всплывающей подсказки, но не имеет html-формата. Существует пример jQuery Tooltip.
<head>
<title>jQuery Tooltip</title>
<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css'; return false;" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$(document).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<a href="#" title="<font color='#FF0000'>That what this widgets</font>">Tooltips</a>
</body>
В подсказке вместо того, чтобы показывать текст "Что это за виджеты" в Красном цвете, отображается "<font color='#FF0000'>That what this widgets</font>". Формат html не применяется к тексту всплывающей подсказки. Похоже, что всплывающая подсказка не распознает формат html. Проблема заключается в том, что стиль на всплывающей подсказке неверен или может быть подсказка jQuery не поддерживает html-контент.
Я хочу знать, почему моя подсказка jQuery не может отображать содержимое html? Мне нужна помощь по моей проблеме.
Ответы
Ответ 2
Лучше настроить цвет с помощью css:
Код Javascript:
$(function () {
$(document).tooltip({ tooltipClass: "custom-tooltip-styling" });
});
CSS
.custom-tooltip-styling { color: #ff0000; }