在Initialize上显示Twitter Bootstrap工具提示

我基本上想要在有人第一次到达页面时显示工具提示，但是当它们hover在页面上（或页面上的其他工具提示）后，它会返回到其默认的hover行为。 发生这种情况似乎有一个错误，但效果不佳。 目前我使用$（’div＃id’）。tooltip（’show’）命令加载工具提示，但我似乎无法弄清楚如何将其恢复为默认的hover行为。 更糟糕的是，如果我为特定div编写hoverfunction以在“显示”和“隐藏”之间切换，那么它就是错误的。

您可以在此网站上查看此行为： http ： //rework.herokuapp.com/organizations ，在“工作原理”部分下。

这是HTML代码：

jQuery的：

  $('img#step1').load(function(){ $('#step1').tooltip('show'); }); $('.step').hover(function() { $('#step1').removeClass('init'); if ($(this).attr('id') != 'step1') { $('#step1').tooltip('hide'); } else { $('#step1').tooltip('show'); } 

该错误再次在网站上可见： http ： //rework.herokuapp.com/organizations在“它是如何工作”一节下。

Answer 1

你可以这样做：

 $('.works .step').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() { $(this).tooltip('enable'); });​​​​​​​ 

演示： http ： //jsfiddle.net/AtvBN/9/ （它适用于页面的不同部分，但概念完全相同）。

Answer 2

“.in”类负责显示工具提示标题。 如果你想

用户首次点击页面时显示所有工具提示。

然后你可以简单地将类添加到所有工具提示元素中。 像这样：

 $('#step1').tooltip('show');//Initialize tooltip in any way you desire $('[data-toggle="tooltip"]').find(".tooltip.fade").addClass("in"); 

如果你想

当用户首次点击页面并设置工具提示默认行为时，删除所有默认显示工具提示。

你也可以这样做

 $('#step1').tooltip('show');//Initialize tooltip in any way you desire $('[data-toggle="tooltip"]').find(".tooltip.fade").removeClass("in"); 

这样它对我有用，希望它对你也有用。