Currently, I am attempting to utilize the angular-tour plugin to provide a brief tour of a website's functionality. My goal is to have tooltips appear on each icon located in the horizontal navbar. However, despite including the necessary scripts and components in the index.html file, only text is rendering which is also getting cut off by the main view. How can this issue be resolved?
I have ensured that angular-tour is included in the angular.module as well. Any assistance would be greatly appreciated. Additionally, I have attached a screenshot showcasing the current state (plain text "Highlighted"). Before making any modifications, I am simply trying to implement the example from into my application. View the screenshot here: https://i.sstatic.net/wrOAn.png
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrummage</title>
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<link href="../bower_components/angular-tour/dist/angular-tour.css" rel="stylesheet" type="text/css"/>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-ui-modal/angular-ui-modal.js"></script>
<script src="../bower_components/angular-charts/dist/angular-charts.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./js/app.js"></script>
<script src="./js/services/utils.js"></script>
<script src="./js/controllers/signin/signin.js"></script>
<script src="./js/controllers/storyBoard/storyBoard.js"></script>
<script src="./js/controllers/analytics/analytics.js"></script>
<script src="./js/controllers/featureSetup/featureSetup.js"></script>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script>
</head>
<body ng-app="scrummage">
<div ui-view
></div>
</body>
</html>
navbar.html:
<div class="sidebar-nav">
<ul>
<li><a href="#"><i class="grow fa fa-gear nav-list-icon"></i></a>
<tour step="currentStep">
<span tourtip="tip 1"> Highlighted </span>
<span tourtip="tip 2"> Elements </span>
<input tourtip="You can use it as an attribute on your element" />
<span tourtip="Full options"
tourtip-step="3"
tourtip-next-label="Next"
tourtip-placement="right"
tourtip-offset="60">Full options</span>
</tour>
</li>
<div id= "analyticsModal" ng-controller='analyticsCtrl'>
<li><a href = "#" ng-click="open()"><i class="grow fa fa-area-chart nav-list-icon"></i></a></li>
<div modal="showModal" close="cancel()" ng-include="'../js/controllers/analytics/analytics.html'"></div>
</div>
<div id= "featureSetupModal" ng-controller='featureSetupCtrl'>
<li><a href="#" ng-click="open()"><i class="grow fa fa-plus"></i></a></li>
<div class="featureModal" modal="showModal" close="cancel()" ng-include="'../js/controllers/featureSetup/featureSetup.html'"></div>
</div>
<li><a href="/logout"><i class="grow fa fa-sign-out"></i></a></li>
</ul>
</div>