Issue with tooltip hover

Hello, Experts!

I am working on a page and have most of it built out. I am trying to add a tooltip to one of our buttons to look modern. However, it is not rendering modern. See attached video and reference the W3schools link for example of modern hover tooltip that is desired.

ref: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h

Specifically this block of code for the buttons:

<div class="row">

   	    <div class="col-four">
	   		<a class="button stroke smoothscroll" onclick="visitPage1();" data-toggle="tooltip" data-placement="top" title="The 1 year graduation session.">ReCharge</a>
            </div>
            <div class="col-four">
                        <a class="button stroke smoothscroll" onclick="visitPage2();">Refresh</a>
            </div>
            <div class="col-four">
                        <a class="button stroke smoothscroll" onclick="visitPage3();">CBA101</a>
            </div>

        </div>

Open in new window


My code:

<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>

   <!--- basic page needs
   ================================================== -->
   <meta charset="utf-8">
	<title>CBA Feedback</title>
	<meta name="description" content="">
	<meta name="author" content="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   <!-- mobile specific metas
   ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    

 	<!-- CSS
   ================================================== -->
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/vendor.css">
   

   <!-- script
   ================================================== -->
	<script src="js/modernizr.js"></script>
    

   <!-- favicons
	================================================== -->
	<link rel="icon" type="image/png" href="favicon.png">
    
    <!-- bootstrap -->

</head>

<body id="top">

	<!-- header
   ================================================== -->
   <header>

   	<div class="row">

   		<div class="logo">
	         <a href="index.html">CBA Feedback</a>
	      </div>

	   	<nav id="main-nav-wrap">
				<ul class="main-navigation">
					<li class="current"><a class="smoothscroll"  href="#intro" title="">Home</a></li>
                    <li><a class="smoothscroll"  href="#survey" title="">Surveys</a></li>
				</ul>
			</nav>

			<a class="menu-toggle" href="#"><span>Menu</span></a>

   	</div>

   </header> <!-- /header -->

	<!-- intro section
   ================================================== -->
   <section id="intro">

   	<div class="shadow-overlay"></div>

   	<div class="intro-content">
   		<div class="row">

   			<div class="col-twelve">


                <!--
	   			<div class='video-link'>
	   				<a href="#video-popup"><img src="images/play-button.png" alt=""></a>
	   			</div>
                -->

	   			<h5>Hello! Welcome to CBA Feedback.</h5>
	   			<h1>Our awesome survey site will allow your voice to be heard.</h1>

	   		<a class="button stroke smoothscroll" href="#survey" title="">Take a Survey!</a>

	   		</div>

   		</div>
   	</div>

   	<!-- Modal Video Popup
	   ========================================================= -->

<!--

      <div id="video-popup" class="popup-modal mfp-hide">

		   <div class="fluid-video-wrapper">
            <iframe src="http://player.vimeo.com/video/14592941?title=0&amp;byline=0&amp;portrait=0&amp;color=faec09" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
         </div>

         <a class="close-popup">Close</a>

	   </div>
-->

   </section>




   <!-- Process Section
   ================================================== -->
  <section id="survey">

   	<div class="shadow-overlay"></div>

   	<div class="survey-content">

         <h5>Please select a survey below.</h5>

   	 <div class="row">

   	    <div class="col-four">
	   		<a class="button stroke smoothscroll" onclick="visitPage1();" data-toggle="tooltip" data-placement="top" title="The 1 year graduation session.">ReCharge</a>
            </div>
            <div class="col-four">
                        <a class="button stroke smoothscroll" onclick="visitPage2();">Refresh</a>
            </div>
            <div class="col-four">
                        <a class="button stroke smoothscroll" onclick="visitPage3();">CBA101</a>
            </div>

        </div>

        <div class="row">

            <div class="col-four">
	   		<a class="button stroke smoothscroll" onclick="visitPage4();">Genesis</a>
            </div>
            <div class="col-four">
            <a class="button stroke smoothscroll" onclick="visitPage5();">TAP</a>
            </div>
            <div class="col-four">
          <a class="button stroke smoothscroll" onclick="visitPage6();">New Store Setup</a>
	   		</div>
   		</div>

      <div class="row">

          <div class="col-four">
      <a class="button stroke smoothscroll" onclick="visitPage7();">Store Opening</a>
          </div>
          <div class="col-four">
          <a class="button stroke smoothscroll" onclick="visitPage8();">Transition Handoff</a>
          </div>
          <div class="col-four">
        <a class="button stroke smoothscroll" onclick="visitPage9();">Site Visits</a>
      </div>
      </div>

      <div class="row">

          <div class="col-four">
      <a class="button stroke smoothscroll" onclick="visitPage11();">Annual Convention</a>
          </div>
          <div class="col-four">
          <a class="button stroke smoothscroll" onclick="visitPage12();">MTD</a>
          </div>
          <div class="col-four">
        <a class="button stroke smoothscroll" onclick="visitPage13();">First Week Follow-up</a>
      </div>
      </div>

   	</div>  	

   </section>


   <!-- Java Script
   ================================================== -->
   <script src="js/jquery-1.11.3.min.js"></script>
   <script src="js/jquery-migrate-1.2.1.min.js"></script>
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script>
     function visitPage1(){
         window.location='https://goo.gl/forms/IHI4k5MXPPLBgD9I2';
     }

     function visitPage2(){
         window.location='https://goo.gl/forms/llQhrXOxVXedEXmq2';
     }

     function visitPage3(){
         window.location='https://goo.gl/forms/WeYhnUQV4Xnz3ji32';
     }

     function visitPage4(){
         window.location='https://goo.gl/forms/dcyv6GAW5TFxRDcT2';
     }

     function visitPage5(){
         window.location='https://app.smartsheet.com/b/form/4cc6196e9bcd48689280a965edeb0b15';
     }

     function visitPage6(){
         window.location='https://goo.gl/forms/r8q4lzzVIPYc7QdF2';
     }

     function visitPage7(){
         window.location='https://docs.google.com/forms/d/e/1FAIpQLSdLjnnSPQs8HiGWl9b2RroDUt_76Px7-TuN1j3_byVAy6LINw/viewform#start=invite';
     }

     function visitPage8(){
         window.location='https://goo.gl/forms/0T9vZOckRkUehJ2o1';
     }

     function visitPage9(){
         window.location='https://goo.gl/forms/bobuP1MucASQUw9N2';
     }

     function visitPage10(){
         window.location='insert address here';
     }

     function visitPage11(){
         window.location='https://app.smartsheet.com/b/form?EQBCT=ff8c7afccad34012a70e88a4498ca864';
     }

     function visitPage12(){
         window.location='https://app.smartsheet.com/b/form/5242ae6d84ef4445960585e69c5c2a4d';
     }

     function visitPage13(){
         window.location='https://docs.google.com/forms/d/e/1FAIpQLSdLjnnSPQs8HiGWl9b2RroDUt_76Px7-TuN1j3_byVAy6LINw/viewform';
     }
       
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });   
       
   </script>
   


</body>

</html>

Open in new window

sj77Asked:
Who is Participating?
 
Leonidas DosasCommented:
Check this plugin Tooltipster
1
 
Leonidas DosasCommented:
The tooltip is working...What exactly is the problem?The only errors that I have is the directory of these
Capture.JPG
0
 
sj77Author Commented:
I believe I forgot to add the video of the tooltip. Please compare the tooltip in the video to the one in the link on w3schools.
2018-03-22_10-57-31.mp4
0
 
sj77Author Commented:
I will implement. Great find!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.