Tour Example

Developer
Sean McCambridge
Size
2,516 Kb
Views
68,816
  1. Tour Example Previews
  2. Tour Example HTML Codes
  3. Tour Example CSS Codes
  4. Tour Example JS Codes

How do I make an tour example?

What is a tour example? How do you make a tour example? This script and codes were developed by Sean McCambridge on 21 August 2022, Sunday.

Tour Example Previews
IQ Test

Tour Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tour Example</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'>
<link rel='stylesheet prefetch' href='http://boomtownroi.github.io/boomstrap/css/boomstrap.css'>
<link rel='stylesheet prefetch' href='http://boomtownroi.github.io/boomstrap/css/boomstrap-docs.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="myApp"> <div ng-controller="TourDemoCtrl"> <p><a class="btn btn-success" id="bootstrap-tour-btn" ng-click="bsTour.startTour()">Tally Ho!</a></p> <div class="row"> <div class="col-sm-6"><h4><span id="stop1">First Stop</span></h4></div> <div class="col-sm-6"><h4><span id="stop2">Second Stop</span></h4></div> </div> <div class="row"> <div class="col-sm-6"><h4><span id="stop3">Third Stop</span></h4></div> <div class="col-sm-6"><h4><span id="stop4">Fourth Stop</span></h4></div> </div> </div> <script type="text/ng-template" id="template/some-custom-bootstrap-template.html"> <div class="popover tour-best-fit-leads"> <div class="arrow"></div> <div class="popover-close"> <i data-role='end' class="ficon ficon-cross property-close"></i> </div> <h3 class="popover-title">Some default title that gets overridden</h3> <div class="tour-popover popover-content"></div> <div class="popover-navigation"> <button class="btn btn-default" data-role="prev">Back!</button> <button class="btn btn-success" data-role="next"><span>Go!</span></button> </div> </div> </script> <script type="text/ng-template" id="template/custom-template-with-end.html"> <div class="popover tour-best-fit-leads"> <div class="arrow"></div> <div class="popover-close"> <i data-role='end' class="ficon ficon-cross property-close"></i> </div> <h3 class="popover-title">Some default title that gets overridden</h3> <div class="tour-popover popover-content"></div> <div class="popover-navigation"> <button class="btn btn-default" data-role="prev">Prev</button> <button class="btn btn-attention" data-role="end" style="width: 60px;"><span>Got It!</span></button> </div> </div> </script>
</div> <script src='http://boomtownroi.github.io/boomstrap/js/boomstrap.min.js'></script>
<script src='http://boomtownroi.github.io/boomstrap/js/boomstrap-angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tour Example - Script Codes CSS Codes

/* this CSS is only for proper display of the codepen. do not add this to the CRM */
body { padding: 36px 24px;
}

Tour Example - Script Codes JS Codes

angular.module('myApp', ['boomstrap'])
.controller('TourDemoCtrl', ['$scope', 'bootstrapTourService', function($scope, bootstrapTourService) { $scope.bsTour = bootstrapTourService; $scope.bsTour.init([ { element: '#stop1', placement: 'right', prev: -1, title: 'First Stop', content: 'You\'ve reached the first stop. Congrats.' }, { element: '#stop2', placement: 'bottom', template: 'template/popover/popover-bootstrap-tour-fit-score.html', title: 'Hello.', content: 'World.' }, { element: '#stop3', placement: 'bottom', template: 'template/some-custom-bootstrap-template.html', title: 'Custom Template Example', content: 'You can specify an angular template for <em>any</em> tour step manually.' }, { element: '#stop4', placement: 'left', template: 'template/custom-template-with-end.html', title: 'Last Stop', content: 'Goodbye!' } ]);
}]);
Tour Example - Script Codes
Tour Example - Script Codes
Home Page Home
Developer Sean McCambridge
Username seanboom
Uploaded August 21, 2022
Rating 3
Size 2,516 Kb
Views 68,816
Do you need developer help for Tour Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sean McCambridge (seanboom) Script Codes
Name
Carousel Card Example
Modal Example
Multiple Cards Example
Alert Example
Popover Example
Chosen Example
Tabs Example
Small Card Example
Lead Category Default Example
Progressbar Example
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!