带有工具提示的fullpage.js水平滑块点 [英] fullpage.js horizontal slider dots with tooltips

问题描述

我正在玩fullpage.js，并且想使用内置的水平滑块，其作用就像一个超级按钮.我缺少的是像在垂直部分菜单上一样，在每个活动点上(以及在将它们悬停时)显示工具提示的可能性.

I'm playing around with fullpage.js and would like to use the built-in horizontal slider which works like a charm. What I am missing is the possibility to show a tooltip on each active dot (and when hovering them) as it does on the vertical section menu.

在以下问题中，我找到了实现此功能的简要指南，jfoutch最后发表了评论:

I found a brief guide to realize this feature in following question, comment from jfoutch at the very end: horizontal slider using full page.js. I don't know how to use the jQuery.text() method or rather where to start exactly.

我们非常感谢您的帮助！谢谢！

Any help is highly appreciated! Thanks!

推荐答案

我找到了自己的解决方案，可以在水平滑块上实现工具提示！ :)

I found my own solution to realize tooltips on the horizontal slider dots! :)

我正在使用Bootstrap tooltip.js插件(因为我已经在网格系统中使用了此框架)，并手动创建了滑块导航来设置工具提示的数据对话框和标题:

I'm using the Bootstrap tooltip.js plugin (as I already use this framework for the grid system) and created the slider navigation by hand to set data-toogle and title for the tooltips:

<div class="fp-slidesNav bottom">
    <ul>
        <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 1"><span></span></a></li>
        <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 2"><span></span></a></li>
        <li><a href="#" class="fp-slide-dots" data-toggle="tooltip" title="Slide 3"><span></span></a></li>
   </ul>
</div>

接下来，您必须初始化工具提示:

Next you have to initialize the tooltips:

$('.fp-slide-dots').tooltip();

有效！ :)

这篇关于带有工具提示的fullpage.js水平滑块点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！