Question

在我的项目中，我使用这样的Bootstrap工具提示：

$(function () {
        $("[rel='tooltip']").tooltip();
    //So if I hove over delete, I'll get the delete tooltips message.
    });

，然后

<a rel="tooltip" title="This is a very long tooltip message!" data-placement="right">test</a>

是否有可能以某种方式完成所有这些以便我不必在链接中包含工具提示消息？相反，我想将工具提示文本保留在别处，并根据工具提示的内容使用它。

例如：

<a rel="tooltip" class="Delete">Link 1</a>
<a rel="tooltip" class="Add">Link 2</a>

deleteMsg = "Click to delete this folder";
addMsg = "Click to add a folder";

$(function () {
  $("[rel='tooltip']").tooltip();
});

这样的事情怎么办？

Answer 1

您可以将所有工具提示放入键入元素类的对象中。像这样：

var tooltips = {
    Delete: 'Click to delete this folder',
    Add: 'Click to add a folder'
}

$(function () {
    $("[rel='tooltip']").each(function() {
        $(this).tooltip({
            title: tooltips[$(this).prop('class')];
        });
    });
});

虽然这可能会起作用，并且可以说是一个更好的关注点分离，但它只是可怕的丑陋，并且很容易通过简单地更改类属性来打破。

我建议您坚持使用将工具提示放在元素的title属性中的默认方法。这也有利于为禁用javascript浏览网站的人们工作。

Answer 2

您可以根据班级名称

选择工具提示变量

<a rel="tooltip" class="delete" href="#">Link 1</a>
<a rel="tooltip" class="add" href="#">Link 2</a>

<script>
var deleteMsg = "Click to delete this folder";
var addMsg = "Click to add a folder";

$(function () {
    $("[rel='tooltip']").each(function () {
        $(this).tooltip({ title: eval($(this).attr('class') + "Msg") });
    });
});
</script>

Bootstrap工具提示设置自定义标题消息

2 个答案: