3

For example. Here is a screenshot of the current webpage with half of the target element offscreen.

enter image description here

In this instance, the current step in the tour is centered on screen, but is there a way I could show both on the screen (my steps and my target element i.e. content), without cutting out my content? 

   var tour = new Tour({
        storage: false
   });

   tour.addSteps([{
      element: "#TransferInfo",
      placement: "bottom",
      title: "Welcome to our landing page!",
      content: "Here is some basic information about this path to this degree program.",
  //    backdrop: true,
      backdropPadding: {
          left: -370,
          right: -370,
          bottom: 20
      },
    },
    {
      element: "#GenEdTable",
      placement: "bottom",
      title: "General Education Categories",
      content: "By clicking on these headers, you will see the equivalencies for the respective courses.  Complete one course per General Education category to get fulfill the university's General Education requirements.",
    //  backdrop: true,
      backdropPadding: {
          left: -370,
          right: -370,
          bottom: 40,
          top: 40
      },
    },
    {
      element: "#MajorTable",
      placement: "bottom",
      title: "Major Courses",
      content: "These give you equivalencies for courses you can take at your community college that directly go toward your major.",
  //    backdrop: true,
      backdropPadding: {
          left: -370,
          right: -370,
          bottom: 40,
          top: 40
      },
    }
  ]);

  tour.init();
  tour.start();

Three drop down forms are clicked, and then the user receives queried info from the database. So, the tour starts immediately after the last and final click.

4

0 回答 0