3

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

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>

谢谢阅读。:)

更新：

好的！我想通了……有点。我不正确地封装了我的字符串： "<>"bad code"<>" 。我的内容选项问题的解决方案是将我的 html 放入变量中并将其设置为内容。JQuery 似乎更喜欢那个。我的样式在工具提示中正确显示，但由于某种原因，它仅适用于为工具提示选择的三个项目之一。控制台中没有任何内容表明它不应该工作。没有语法错误，我选择了正确的 id。我很混乱。

4

3 回答 3

10

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

我不知道为什么 jQuery 团队决定这样做，因为看起来selector你正在应用工具提示，这与items选项使用的东西是一样的。相当重复。

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

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

于 2013-04-02T15:09:47.033 回答
2

当您遇到报价问题时，您有很多选择，就像您说的：

  1. 像你最后一样使用另一个变量

  2. 用这样的反斜杠转义“内部” qoutes：

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

  3. 结合单引号和双引号：

    $('#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>

id一个html页面中只能有一个相同的链接！所以如果你声明了更多相同的链接id，很可能它不会工作。

于 2013-07-09T15:50:09.957 回答
1

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

这会产生语法错误。

请执行以下操作：

  • 学习如何使用浏览器的 JS 错误控制台
  • 学习 JS 语法的绝对基础，以及如何使用字符串/文本字面量进行操作
于 2013-03-21T16:23:03.400 回答