Question

我正在尝试为页面上的几个单选按钮选项创建工具提示。我已经足够轻松地显示了[title]属性的工具提示，但我想在几个元素中有选择地格式化工具提示文本。我知道我可以提供HTML内容，我已经创建了一些类来设置内容的样式，但现在工具提示不再显示了。我认为我的问题是我没有正确指定“项目”选项。事实上，我不太确定如何将html“content”选项定义为项目。 Halp play！

JS

$('#tooltip').tooltip({
    tooltipClass: "tooltip-class"
    items: what do?
    content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
});

JS选择的HTML

<a href="#" id="tooltip" class="link-info"></a>

感谢阅读。：）

更新

确定！我想通了......有点儿。我不恰当地包裹我的字符串：“＆lt;＆gt;”错误代码“＆lt;＆gt;” 。我对内容选项的问题的解决方案是将我的html放在变量中并将其设置为内容。 JQuery似乎更喜欢它。我的样式正好显示在工具提示中，但由于某种原因，它只针对为工具提示选择的三个项目之一。控制台中没有任何内容表明它不起作用。没有语法错误，我正在选择正确的ID。我很困惑。

Answer 1

我想我知道你遇到了什么。当您使用content选项时，您仍然必须在元素上包含title属性，或者将items选项指定为不同的选项。

我没有IDEA为什么jQuery团队决定这样做，因为看起来你正在应用工具提示的selector，与items选项使用的相同。非常重复。

无论如何，您可以更改内容但确保要应用工具提示的元素具有title属性，或者使用选择器指定items选项，该选项器可以简单地匹配您的选择器应用工具提示。确实很奇怪。

实施例： $('#selector').tooltip({ content: 'your content', items: '#selector' });

Answer 2

当你有引号问题时，你有很多选择，就像你说的那样：

最后使用另一个变量

使用反斜杠逃避“内部”qoutes：

$('#tooltip').tooltip({
    tooltipClass: "tooltip-class",
    items: "what do?",
    content: "<div class=\"tooltip-header\">header</div><div class=\"tooltip-description\">text</div>"
});

结合单引号和双引号：

$('#tooltip').tooltip({
    tooltipClass: "tooltip-class",
    items: "what do?",
    content: '<div class="tooltip-header">header</div><div class="tooltip-description">text</div>'
});

更新后的第二个问题：如果您已使用id创建了链接，并且您正在应用带有ID选择器的工具提示

<a href="#" id="tooltip" class="link-info"></a>

在一个html页面中只能有一个带有相同id的链接！因此，如果您使用相同的id声明更多链接，则很可能无法正常工作。

Answer 3

content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"

这会产生语法错误。

请执行以下操作：

了解如何使用浏览器的JS错误控制台
学习JS语法的绝对基础知识，以及如何使用字符串/文本文字

如何为样式内容定义JQuery UI工具提示项选项

3 个答案: