ChatGPT解决这个技术问题 Extra ChatGPT

Twitter Bootstrap 的工具提示

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

我对工具提示有点困惑。他们是covered in the documentation,但 Twitter 假设有一些知识。例如,他们说使用以下 JavaScript 代码触发工具提示。

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

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

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

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


A
Andres Ilich

我认为您的问题归结为在设置工具提示时使用什么合适的选择器,而答案几乎就是您想要的任何东西。如果您想使用一个类来触发您的工具提示,您可以这样做,例如:

<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]"
})

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


完美的! $('[rel=tooltip]').tooltip() 是否存在性能问题?
@schmmd 我看不出为什么会有性能下降,除非你有 100,000 个工具提示可供选择,所以不用太担心,它是 CSS 之类的属性选择器。
您可能不关心语义,但理想情况下,rel 最好保留用于这些目的,class 在这里可能会更好,请参阅 stackoverflow.com/questions/15214776/…
关于 rel="tooltip" 的好建议!
最好使用 data-rel="tooltip" 而不是 rel="tooltip" 以符合 HTML 标准。
M
Mohamad Shiralizadeh

最简单的使用方法是

把它放在标题中:

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

接着

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

因此,如果您在页面中的任何位置使用 rel="tooltip" 标记了该 js 代码,则获取引导工具提示。

祝你好运。


N
Nate-Wilkins

将此添加到您的标题中

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

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


这对我有用,目前工具提示出现在元素的顶部。如何更改它以使工具提示出现在底部?
B
Bojangles

我包含了 JS 和 CSS 文件,并想知道为什么它不起作用,是什么让它起作用的原因是我在 <head> 中添加了以下内容:

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

A
Amged

只需标记所有数据切换...

jQuery(function () {
    jQuery('[data-toggle=tooltip]').tooltip();
});

http://jsfiddle.net/Amged/xUQ6D/19/


E
Eric Herlitz

那是因为这些东西(我的意思是工具提示等)是 jQuery 插件。是的,他们假设了一些关于 jQuery 的基本知识。我建议您至少查找有关 jQuery 的基本教程。

您总是必须定义哪些元素应该有工具提示。而且我不明白为什么 Bootstrap 应该提供该类,您定义这些类或您自己。也许您希望引导程序自动发挥作用?然而,这种魔法也会导致很多问题(不需要的副作用)。

只需编写 $(".myclass").tooltip() 即可轻松实现这种魔力,这行代码完全符合您的要求。您唯一需要做的就是将 myclass 类附加到那些需要应用工具提示的元素。 (只需确保在加载 DOM 后运行该行代码。见下文。)

$(document).ready(function() {
    $(".myclass").tooltip();
});

编辑:显然你不能使用类工具提示(可能是因为它在内部使用的某个地方!)。

我只是想知道为什么 bootstrap 不运行您使用我可以包含的某些类指定的代码。

你想要的东西产生的代码几乎和你现在必须做的一样。但是他们没有这样做的最大原因是因为它会引起很多麻烦。有人想将其分配给具有 ID 的元素;其他人希望将其分配给具有指定类名的元素;并且其他人希望将其分配给通过某些选择过程实现的指定元素。这 3 个选项会导致额外的复杂性,而 jQuery 已经提供了它。我还没有看到很多插件做你想做的事(只是因为它是不必要的;它真的不会为你节省代码)。


仅供参考,这实际上是我尝试过的早期事情。您不能使用类 tooltip。它会清除标签的内容。我切换到 tooltiparea
我不希望有魔法,我只是想知道为什么 bootstrap 不运行您使用我可以包含的某些类指定的代码。
d
dwlz

简单的使用这个:

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
   tooltip
</a>

使用 jQuery:

$(document).ready(function(){
    $('#mytooltip').tooltip();
});

您可以在工具提示的左侧简单地添加 this->data-placement="left"

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>