Twitter Bootstrap的工具提示

Question

我正在使用Twitter Bootstrap - 而且我不是前端开发人员!然而,它正在使这个过程 - 我敢说 - 有趣!

我对工具提示有点困惑.它们包含在文档中,但Twitter假设了一些知识.例如,他们说要使用以下JavaScript代码触发工具提示.

$('#example').tooltip(options)

在浏览了它们的源代码之后,我意识到带有工具提示的字段需要在一个类中并运行以下代码.

$('.tooltipclass').tooltip(options)

但现在我的问题是,为什么Twitter Bootstrap不能提供这样的课程tooltip？只是为了允许更大的配置？是否更好地使用工具提示添加单个元素tooltipclass,或者我应该添加周围区域tooltipclass？如果我使用类标识符(.class)而不是名称标识符(#name),这有关系吗？

Answer 1

我认为你的问题归结为在设置工具提示时使用的正确选择器,答案几乎是你想要的.如果要使用类来触发工具提示,可以执行此操作,例如:

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>

然后你可以触发.link附加类作为工具提示的所有链接,如下所示:

$('.link').tooltip()

现在,回答你的问题,为什么引导程序开发人员没有使用类来触发工具提示,因为它不是完全需要的,你几乎可以使用你想要定位工具提示的任何选择器,例如(我个人最喜欢的)的rel属性.使用此属性,您可以将rel属性设置为的所有链接或元素作为目标tooltip,如下所示:

$('[rel=tooltip]').tooltip() 

你的链接看起来像这样:

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>

当然,您也可以使用容器类或ID来定位特定容器中的工具提示,该特定容器要使用特定选项进行挑选,或者与其他内容分开,您可以像这样使用它:

$('#example').tooltip({
    selector: "a[rel=tooltip]"
})

此选择器将使用div中rel"属于"属性的所有工具提示作为目标#example,这样您就可以单独为该部分添加特殊样式或选项.简而言之,您几乎可以使用任何有效的选择器来定位您的工具提示,并且不需要使用额外的类来标记它们以标记它们.

Answer 2

最简单的方法是使用它

把它放在标题中:

<script>
    $(function ($) {
        $("a").tooltip()
    });
</script>

然后

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
    My link text
</a>

所以使用js代码,如果你有任何标记页面中的任何地方rel="tooltip"获得引导工具提示.

祝好运.

Answer 3

将其添加到标题中

<script>
    //tooltip
    $(function() {
        var tooltips = $( "[title]" ).tooltip();
        $(document)(function() {
            tooltips.tooltip( "open" );
        });
    });
</script>

然后只需将属性添加title="your tooltip"到任何元素