Isaiah Melendez
asked on
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:
My code:
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>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&byline=0&portrait=0&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>
Leonidas Dosas
The tooltip is working...What exactly is the problem?The only errors that I have is the directory of these
ASKER
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
2018-03-22_10-57-31.mp4
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I will implement. Great find!