Twitter Bootstrap的工具提示 [英] Tooltips with Twitter Bootstrap

问题描述

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

I am using Twitter Bootstrap--and I am not a frontend developer! However, it's making the process almost--dare I say--fun!

我对工具提示感到有些困惑。它们是文档中涵盖的，但Twitter假设了一些知识。例如，他们说使用以下JavaScript代码触发工具提示。

I'm a bit confused about tooltips. They are covered in the documentation but Twitter assumes some knowledge. For example, they say to trigger the tooltip with the following JavaScript code.

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

在探索源代码后，我意识到带有工具提示的字段需要在一个类中运行以下代码。

After poking around on their source, I realized that fields with tooltips need to be in a class and have the following code run.

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

但现在我的问题是，为什么Twitter Bootstrap不提供这样的类工具提示？只是为了允许更大的配置？是否更好地将带有工具提示的单个元素添加到 tooltipclass ，还是应该将周围区域添加到 tooltipclass ？如果我使用类标识符（ .class ）而不是名称标识符（ #name ），这是否重要？ / p>

But now my question is, why doesn't Twitter Bootstrap provide such a class tooltip? Just to allow greater configuration? Is it better to add the individual elements with tooltips to tooltipclass, or should I add the surrounding area to tooltipclass? Does it matter if I use a class identifier (.class) instead of a name identifier (#name)?

推荐答案

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

I think your question boils down to what proper selector to use when setting up your tooltips, and the answer to that is almost whatever you want. If you want to use a class to trigger your tooltips you can do that, take the following for example:

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

然后你可以用 .link 类附加为工具提示，如下所示：

Then you can trigger all links with the .link class attached as tooltips like so:

$('.link').tooltip()

现在，回答你的问题，为什么引导程序开发人员没有使用类触发工具提示，因为它不需要确切地说，您几乎可以使用任何想要定位工具提示的选择器，例如（我个人最喜欢的） rel 属性。使用此属性，您可以将 rel 属性设置为 tooltip 的所有链接或元素定位，如下所示：

Now, to answer your question as to why the bootstrap developers did not use a class to trigger tooltips that is because it is not needed exactly, you can pretty much use any selectors you want to target your tooltips, such as (my personal favorite) the rel attribute. With this attribute you can target all links or elements with the rel property set to tooltip, like so:

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

您的链接看起来像这样：

And your links would look like something like this:

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

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

Of course, you can also use a container class or id to target your tooltips inside an specific container that you want to single out with an specific option or to separate from the rest of your content and you can use it like so:

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

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

This selector will target all of your tooltips with the rel attribute "within" your #example div, this way you can add special styles or options to that section alone. In short, you can pretty much use any valid selector to target your tooltips and there is no need to dirty your markup with an extra class to target them.

这篇关于Twitter Bootstrap的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！