Is it possible to add tooltips inside slides?

[rac84phang]

Is it possible to add tooltips inside slides? (as the option navigationTooltips but for slides rather than for sections)

[alvarotrigo]

What do you mean? Of course you can. You can do whatever you want :)
If you are using a plugin, just add it on the afterRender callback.

[souhailcrea]

How I can create?[?]

2014/1/18 alvarotrigo notifications@github.com

Closed #176 #176.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/176
.

---

Cordialement

GSM : 0601 05 39 39

Le contenu du présent courriel est privilégié, confidentiel et soumis à des
droits d'auteur.
Il est interdit de l'utiliser ou de le divulguer sans autorisation. Si vous
avez reçu cette transmission par erreur, nous vous prions de la détruire et
de notifier immédiatement !
Afin de contribuer au respect de l'environnement, merci de n'imprimer ce
courriel qu'en cas de nécessité !

[alvarotrigo]

If you want to know how to create tooltips or any other thing not related with the plugin, you can try to ask here: http://stackoverflow.com/

This forum is to treat topics directly related with the plugin.

[rac84phang]

I rephrase my question, Is it also possible for the bullet navigation to use tooltips like in "main menu"? but thanks, i will try on with tooltips plugin.

[alvarotrigo]

I guess with "main menu" you are making reference to the vertical navigation bullets. Right?

I'm afraid it is not possible right now.

[Djules]

It should be easy to use the title attribute of each section, or even the value of an HTML5 data attribute like data-tooltip.

[metaxos]

We would be interested if somebody has already a solution for tooltips for the slider navigation. Thank you.

[Djules]

This is how I did it :

On each section, I added an HTML5 attribute like data-navigation, i.e.

<div class="section" data-navigation="home|Home">
    ...
</div>

My attribute is written like this, because I wanted the anchors to be dynamic as well. SO the first part before the pipe is the anchor (for the URL hash), and after it's my tooltip text.

Then, right before implementing the plugin, in JavaScript, I used a loop on each section to retrieve the informations I want.

// two variables to store anchors and tooltips
var anchors = [],
    tooltips = [];
$('.section').each(function() {
    // retrieve the attribute
    var navigation = $(this).data('navigation');
    if (!navigation)
        return;

    // the attribute data-navigation is built like : anchor|tooltip
    var parts = navigation.split('|');

    anchors.push(parts[0]);
    tooltips.push(parts[1]);
});

and that's it !

You can name the attribute as you wish. You can skip the anchor part and use the attribute only for the tooltip, make just some arrangements.

Hope it helps.

[jferdizzle]

Hey Alvaro,

How can I make each slide within a section a different color?

Thanks!

[alvarotrigo]

@jferdizzle with css. Nothing to do with fullPage.js.

[jferdizzle]

Gotcha, thanks for the quick response. Love your work!

[Bart-Holland]

@alvarotrigo I just changed the code and have it working.
I cloned the project, created a (obviously local) branch and wanted to create a pull request, but can't.
Can you help out here? Code didn't change much but it is working for me ;)

[Bart-Holland]

OK so, to solve this issue
Open jquery.fullPage.js and do this:

1. • underneath //slide find "var TABLE = 'fp-table';"
   • on the next line paste: var SECTION_SLIDE_TOOLTIP = 'fp-slide-tooltip';
2. • find: "scrollBar: false," (probably on line 104 or 105)
   • on the next line paste: "slideTooltips: [],"
3. • find "function addSlidesNavigation(section, numSlides){"
   • replace the complete for loop for:

  for(var i=0; i< numSlides; i++){

            var li = '<li><a href="#"><span></span></a>';

            //add slideTooltip
            var tooltip = options.slideTooltips[i];

            if (typeof tooltip !== 'undefined' && tooltip !== '') {
                li += '<div class="' + SECTION_SLIDE_TOOLTIP + ' ' + options.slidesNavPosition + '">' + tooltip + '</div>';
            }

            li += '</li>';

            nav.find('ul').append(li);
        }

Then open the jquery.fullPage.css and at the bottom paste this:
.fp-slidesNav ul li .fp-slide-tooltip {
position: absolute;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
}
.fp-slidesNav ul li:hover .fp-slide-tooltip,
.fp-slidesNav.fp-show-active a.active + .fp-slide-tooltip {
-webkit-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
width: auto;
opacity: 1;
}
.fp-slidesNav ul li .fp-slide-tooltip.bottom {
bottom: 20px;
}
.fp-slidesNav ul li .fp-slide-tooltip.top {
top: 20px;
}

Now you are good to go and you can use the tooltips on the slides by setting slideTooltips in the options. Per example:

slideTooltips: ["slide 1", "slide 2", "slide 3", "slide 4"]

[tschortsch22]

@Bart-Holland I followed your instructions exactly to implement slide tooltips but it doesn't work! Could you please help me to get this working? I really appreciate any suggestions!

[Bart-Holland]

I made a for in which I added these things:
https://github.com/Bart-Holland/fullPage.js

If you would be so kind to test it @tschortsch22
then I can add a pull request for @alvarotrigo

[tschortsch22]

Thank you, it works like a charm! :)

What if I use two sliders on my site? Is there a way to set tooltips separately?

[Bart-Holland]

Not sure, the only way is to try this out by creating a second object in a different container.

[tschortsch22]

I created a second object in another section and the slides showed the same tooltips unsurprisingly.. Is there any approach to get different tooltips for multiple sliders? Guess this is getting quite difficult, right?

[Bart-Holland]

What you might want to do is place this in a JSFiddle and send me the link. This way I can see what you do and help finding a solution.

[tschortsch22]

I created this Fiddle with 3 sliders to illustrate my issue.

[Bart-Holland]

sorry for the late response, I see the issue.
I think it could be solved to create an object of arrays

slideTooltips: {
    ["S0Slide 0", "S0Slide 1", "S0Slide 2", "S0Slide 3"], 
    ["S1Slide 0", "S1Slide 1", "S1Slide 2", "S1Slide 3"],
    ["S2Slide 0", "S2Slide 1", "S2Slide 2", "S2Slide 3"]
}

This might not work immediatly, we need to change the fullpage.js as well to fix this.
however... this does looks like the way to go.

[tschortsch22]

Thanks for your reply, using an array would be awesome! Any idea how to change the fullpage.js?

[Bart-Holland]

Yeah I have an idea...
Now I need some time ;-)

[nycguyjason]

Did you guys ever find a solution to get the multiple slides to show different tooltips?

I tried working with your recommendation above. But it kills FullPage.

slideTooltips: {
    ["S0Slide 0", "S0Slide 1", "S0Slide 2", "S0Slide 3"], 
    ["S1Slide 0", "S1Slide 1", "S1Slide 2", "S1Slide 3"],
    ["S2Slide 0", "S2Slide 1", "S2Slide 2", "S2Slide 3"]
}

Is this resolved in any of the FullPage dev versions?

[alvarotrigo]

Is this resolved in any of the FullPage dev versions?

Nop.