我如何显示工具提示而不将任何元素放在intro.js上

Question

i am using intro.js for my product tour. i want to show tooltip without focusing any element like "welcome to the XYZ tour". i want to use only bootstrap and intro js and i dont want to use any alerts,popups... any solution in terms of intro.js options here i am attaching screenshots.. i am able to attain it if i assing some random selector value, but i want a clean and fair code

coffee js:

intro.setOptions steps : [ element : "randomXyzselectorThatDoesntExistinPage" intro : "Welcome to the Create New Booking Tour, please follow the step by step guide to understand the flow clearly

Click the 'Next' button to get started on the tour

" position : "bottom" , element : ".userContainer" intro : "FIRST, lets Search if the Guest already exists in our records

Click the NEXT button to get started on the tour

" position : "bottom" , element : ".availabilityContainer" intro : "Now, lets Check the availability of OYOs for the dates our Guest requires stay and choose one of the availble OYOs to proceed to book" position : "bottom" , element : ".overlayIntrojs" intro : "After selecting an OYO among the available OYOs for those dates, lets choose number of rooms, type of rooms, extra beds, extra persons,discount and other basic information about the booking

" position : "top" , element : ".introJsSel4" intro : "The Payment Details section!, proceed to confirm the booking by entering payment details like mode of payment, amount paid, payment reference number etc" position : "top" ] intro.setOption "doneLabel", "Finish" intro.start().oncomplete -> window.location.href = "/admin/bookings/36" return

SCREENSHOT :

[IMG] http://i59.tinypic.com/2zges2b.jpg[/IMG]

i want the first tooltip to be dispalyed as some WELCOME MESSAGE than direct tour slide... i want what i show in the above image,without having to give some random selector in steps but in a clear introjs supported way

Answer 1

You need to use programmatic definition of steps like following:

    var intro = introJs();
      intro.setOptions({
        steps: [
          { 
            intro: "Hello world!"
          },
          { 
            intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip."
          }
        ]
      });

      intro.start();

Here is an example: https://github.com/usablica/intro.js/blob/master/example/withoutElement/index.html