fullpage.js horizontal slider dots with tooltips

问题

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.

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!

回答1:

fullpage.js doesn't provide a way to do it as you can see in this open issue.

What you can do is create your own navigation by using the methods fullpage.js uses, such as moveTo and activate or desactivate each nav bullet by using callbacks such as afterLoad or even the state class fp-viewing-X-Ythat fullpagejs provides.

回答2:

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

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();

It works! :)

来源：https://stackoverflow.com/questions/36210338/fullpage-js-horizontal-slider-dots-with-tooltips