Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Can you create a page tour with TippedJS?

edited March 2 in Tipped

Hi,

I'm new to Javascript, and I only know the basics of using TippedJS.

Nonetheless, is it possible to create a page tour using TippedJS? For example, I would like to click a button, and then have a sequence of tooltips appear after clicking a "Next" button in each one, with the final tooltip ending the tour.

I get the impression that this is possible, but I'm not sure where to start and how I should go about constructing it. I was hoping I might be able to get some simple example code to get me on the right track.

Thanks in advance,
Greg.

Comments

  • You'd need Tipped Pro since you'll have to use the API.

    Basically you make the tooltips you need with buttons in them. Make that work first using regular tooltips. You can put the html for the buttons in there using inline or ajax tooltips, or just raw html as a string.

    <button onclick="Tipped.show('#tour_step2');Tipped.hide(this);">Next</button>

    That shows the tooltip bound to an element #tour_step2 when clicked and hides the tooltip that contains the button. Once that works add showOn:false, hideOn:false to the tooltip options so it no longer toggles whenever you mouseover the element, that way only the buttons trigger them.

    Add some way to open the first tooltip, like when the page is loaded, and you'll have a tour.

    $(function() {
      Tipped.show('#tour_step1');
    });
    
Sign In or Register to comment.