bootstrap-tour


trigger introJs With a button or link


I've used this Tutorial in order to create a guide
http://www.hongkiat.com/blog/introjs-step-by-step-guide-tutorial/
$(function(){
var introguide = introJs();
// var startbtn = $('#startdemotour');
}
introguide.setOptions({
steps: [
{
element: '.nav-bar',
intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',
position: 'bottom'
},
{
element: '.nav-logo',
intro: 'Click this main logo to view a list of all Hongkiat demos.',
position: 'bottom'
},
{
element: '.nav-title',
intro: 'Hover over each title to display a longer description.',
position: 'bottom'
},
{
element: '.readtutorial a',
intro: 'Click this orange button to view the tutorial article in a new tab.',
position: 'right'
},
{
element: '.nav-menu',
intro: "Each demo will link to the previous & next entries.",
position: 'bottom'
}
]
});
But I could not find a way or I did not understand :)
How to trigger introJs With a button or link.
In addition, I've search on the Internet User's Guide
But I did not find enough information on the subject:(
I tried this:
Show me how
&
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
But nothing happens
please help me
The example is right there on your tutorial page:
var startbtn = $('#startdemotour'); // <-- you need to uncomment this line, or just use $('#startdemotour').on()
startbtn.on('click', function(e){
e.preventDefault();
introguide.start();
$(this).hide();
});

Related Links

Bootstrap multi page tour - start from current page/path in the tour
Multiple page bootstrap traversal is not possible
bootstrap tour tip is not working inside scrollable Div
trigger introJs With a button or link
How to remove state from bootstrap tour
Locate element in Bootstrap tour by Class Name, Css or Xpath

Categories

HOME
google-chrome-extension
keras
kde
razor
spring-cloud-stream
yarn
youtube-api-v3
twitter-bootstrap-4
ckeditor
alpha
slick-slider
windows-azure-storage
remote-access
visual-studio-cordova
iron-router
worldwind
facebook-page
custom-wordpress-pages
jasonette
physics-engine
chromium-embedded
crystal-reports-2010
wpfdatagrid
virtualdub
phpfox
facebook-apps
javascriptcore
ecto
google-sites-2016
grails-3.1
jmonkeyengine
bitbucket-pipelines
android-browser
xenforo
ensembles
mapzen
sql-server-agent
jvm-languages
total-commander
btrace
angular-resource
prolog-setof
setter
zendesk-app
sqldf
nbconvert
orthogonal
color-picker
infix-notation
probability-density
storekit
clang-static-analyzer
qgraphicsview
hover-over
netmq
historian
tcpserver
separator
lib.web.mvc
rgeo
appfabric-cache
operation
graph-api-explorer
directoryservices
nsmutabledictionary
clicktag
socketexception
rdl
picturefill
jboss-weld
concurrent-collections
terminal-services
mysqltuner
opcache
eventual-consistency
mqx
pygit2
lcs
isnullorempty
newtonscript
jspinclude
appconkit
semantic-diff
nsdatecomponents
pydot
zpt
external-accessory
rfc1123
yui-datatable
nsviewanimation
perfect-hash
meego
firefox4
phonon
mediarss
django-notification

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App