![]() This example was taken almost directly from the documentation, and is the easiest way to get started with Bootstrap Tour.īootstrap Tour offers tons of options to customize each step of the tour you want to create. Get's everything loaded up and ready to go. Title: "Let's finish this thing off with a bang.", Next, to get started with a tour, perform the following within your JavaScript file (which we'll cover shortly):Įlement: ".ssage-1", // element selector to show the popover next to Ĭontent: "We're going to make this quick and useful." Notice that you will also need to include Bootstrap's base css file in order to display the Bootstrap popover. From the documentation, here are the required assets. Luckily, this is supported in Bootstrap Tour by default an "End Tour" button is present at every step.īootstrap Tour requires, of course, elements of Twitter Bootstrap, as well as its own CSS file and JavaScript file, in addition to jQuery. The only exception to this rule would be a site that relies almost exclusively on a tour as a core feature (the described photo site would be a possible example), but even in these cases, it should be easy for a user to exit the tour. Users want to gather all necessary information to use your application or view your story, but they also want that to happen as quickly as possible. While we're on the subject of what to avoid, it would be wise to keep your tour as short as possible. ![]() If your interface follows very clear conventions and you haven't heard any complaints of confusion, adding a tour may block your users from doing what they want to do most: use your application. There are plenty of use cases for when you would want to use a tour. When a user clicks on a city, an interactive tour allows you to point out elements of the photo that may otherwise go unnoticed. Imagine you are building a site dedicated to showing off gorgeous panoramas of cities around the world. This avoids the user having to interpret directions if you used a less clear medium such as video, or even worse, textual guides.Īnother use case for an interactive tour is to describe a photo. ![]() Once complete, the user can, in a way, see the "shadow" of the instruction you provided in the walkthrough. If your website requires some level of familiarity, showing your users what to do can be very helpful. If that doesn't make sense to you, read on - we're going to break it down so you can create valuable, engaging instructions for your users. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.īootstrap Tour is a jQuery-based plugin for Twitter Bootstrap which allows you to easily build interactive walkthroughs using a minimal amount of declarative JavaScript configuration in conjunction with your existing DOM structure. When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |