Skip to content

Instantly share code, notes, and snippets.

@Kaiserhaynes

Kaiserhaynes/tooltip.css

Created November 18, 2015 19:22
Show Gist options
  • Save Kaiserhaynes/94cc5a10f0dc2b6af732 to your computer and use it in GitHub Desktop.
Save Kaiserhaynes/94cc5a10f0dc2b6af732 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tooltip.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<title> David Haynes-Guenther</title>
<!-- /link section/ -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/normalize.css" type="text/css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
<!--/scrollplaybar/-->
<body data-spy="scroll" data-target=".navbar">
<!--/scrollplaybar/-->
<!--/Navigation Bar/-->
<nav class="container anchor" id="process">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a href="#">David Haynes-Guenther</a>
</div>
</div>
</div>
<!-- end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutme"> About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact"> Contact</a></li>
<li><a href="#faq">Learn More</a></li>
</ul>
</div>
<!-- end navbar collapse -->
</nav>
<!-- end navbar container -->
</nav>
<!-- navbar ends here -->
<!--/HERO IMAGE/-->
<div id="mycarousel" class= "carousel slide">
<ol class= "carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/berlinhero1.jpg" alt="hero1" class= "img-responsive">
<div class="carousel-caption">
<h3> Header 1 </h3>
<p> description</p>
</div>
</div>
<div class="item">
<img src="img/heroimg23.png" alt="hero2" class= "img-responsive">
<div class="carousel-caption">
<h3> Header 2 </h3>
<p> description</p>
</div>
</div>
<div class="item">
<img src="img/woodhero.jpg" alt="hero3" class="img-responsive">
<div class="carousel-caption">
<h3> Header 3 </h3>
<p> description</p>
</div>
</div>
</div>
<a class= "carousel-control left" href="#mycarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class= "carousel-control right" href="#mycarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- Example row of columns -->
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
<h2>Portfolio Concept</h2>
<p>I am new to web development,<a href="#" title="More Information" id="item1">tooltips</a>.so I do not have any projects to display...yet. I do however, have some basic ideas I'd like my portfolio to have. Simple things like an easy to use navigation, so that people could easily look at my work, contact information, I'd like to have linkable images, and relatively few images, as I'd like it to be clutter free. </p>
<p><a href="https://google.com" class="tooltiptest"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="More info"> View more.</button></a> &raquo;</p>
</div>
<div class="col-md-4 col-xs-6">
<h2>Project Goals</h2>
<p>The plan is to dedicate 40 hours a week to learning we development, I'd like to complete this course in three months in order to start my career as quickly as possible.</p>
<p><a href="https://google.com" class="tooltiptest"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="More info"> View more.</button></a> &raquo;</p>
</div>
<div class="col-md-4 col-xs-6">
<h2>Course Goals</h2>
<p>Through this course, I hope to gain the skills necessary to be qualified for an entry level junior web developer position. I am making a career change, web development is an exciting field, ever-changing and expanding. </p>
<p><a href="https://google.com" class="tooltiptest"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="More info"> View more.</button></a> &raquo;</p>
</div>
</div>
</div>
<!--/ABOUT ME/-->
<div class="container-fluid" id="aboutme">
<h1 class="about-header">ABOUT ME</h1>
<div class="container">
<div class="row" id="about-row">
<div class="col-md-4">
<h3>Introduction</h3>
<p>I Live in a New York alley was never as much fun as in this 1961 Top Cat! The most effectual Top Cat! Whose intellectual close friends get to call him T.C.Providing it's with dignity.
</p>
</div>
<div class="col-md-4">
<h3>My skills</h3>
<ul id="skill-list">
<li>HTML, CSS</li>
<li>Bootstrap framework</li>
<li>Small business accounting</li>
<li>Accounts payable/ receivable</li>
</ul>
</div>
<div class="col-md-4">
<h3>More about me</h3>
Top Cat, a clever hustler whose close friends get to call him TC, leads his faithful followers Benny the Ball, Choo Choo, Brain, Fancy-Fancy and Spook in assorted scams, gambling activities and harebrained stunts, all in the pursuit of a fast dollar. Keeping an eye on things is Officer Dibble, a beat cop who has his hands full trying to break up TC's shenanigans.
</div>
</div>
</div>
<div class="about-footer-space">
</div>
</div>
<!--/PORTFOLIO/-->
<div class="container" id="portfolio">
<div class="header">
<h1>MY WORK</h1>
</div>
<div class="container">
<div class="row" id="name">
<div class="col-md-3 col-xs-12">1<img src="img/web1.jpg" class="img-responsive"></div>
<div class="col-md-3 col-xs-6">2<img src="img/web1.jpg" class="img-responsive"></div>
<div class="col-md-3 col-xs-6">3<img src="img/web1.jpg" class="img-responsive"></div>
<div class="col-md-3 col-xs-6">4<img src="img/web1.jpg" class="img-responsive"></div>
<div class="col-md-3 col-xs-6">5<img src="img/web1.jpg" class="img-responsive"></div>
<div class="col-md-3 col-xs-6">6<img src="img/web1.jpg" class="img-responsive"></div>
<div class="col-md-3 col-xs-6">7<img src="img/web1.jpg" class="img-responsive"></div>
<div class="col-md-3 col-xs-6">8<img src="img/web1.jpg" class="img-responsive"></div>
</div>
</div>
</div>
</div>
<!--/CONTACT/-->
<div class="container" id="contact">
<div class="big-paragraph">
<p>HOW TO CONTACT ME</p>
</div>
<!--/FORM/-->
<div class="container-fluid">
<div class="row" id="contact-form">
<div class="col-md-7 col-md-5">
<div class="text_transbox">
<p class="contact-text">Contact me for Awesome stuff</p>
<a href="mailto:donovan@donovanclarke.com"><span class="glyphicon glyphicon-envelope"></span></a>
<p class="contact-text">Davidhaynesjoseph@gmail.com</p>
<p class="contact-text"><span class="glyphicon glyphicon-tower"></span>
Niemetzstrasse 7,
Neukolln,Berlin,
12055
<p class="contact-text"><span class="glyphicon glyphicon-phone"></span>+49 17680709458</p>
</div>
</div>
<div class="col-md-7 col-md-5">
<h3>You talking to me?</h3>
<form>
<div class="form-group">
<label for="name">Name*</label>
<input type="text" class="form-control" id="name" required="required" placeholder="Enter name">
</div>
<div class="form-group">
<label for="tel">Telephone number (optional)</label>
<input type="tel" class="form-control" id="tel" required="required" placeholder="Enter phone number (optional)">
</div>
<div class="form-group">
<label for="email">Email address*</label>
<input type="email" class="form-control" id="email" required="required" placeholder="Enter email">
</div>
<div class="form-group">
<label for="message">Your message below.</label><br>
<textarea style="resize:none" cols="40" rows="5" placeholder="Your message here" class="form-control" id="message" minlength=5></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/FAQ'S/-->
<div class="container" id="faq">
<div class="header">
<h1>FAQ'S</h1>
</div>
<div class="container-fluid" id="learnmore">
<div class="row">
<div class="col-sm-12">
<h2 class="learn-more">Learn More</h2>
</div>
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" title="View my Resume" data-target=".bs-example-modal-sm">Resume / CV Letter</button>
</div>
<!-- Small modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria=hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="img/ResumeDavidNew.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Will the Kick Dummy fall over?
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
The DVD is an instructional guide that leads you through the moves step by step. Once you have been instructed in the correct actions it is necessary to practice the moves. The DVD includes a great 3 minute routine which forms the basis of your day to day practice. Follow along for just two weeks and you will have learned these moves and made them your automatic response.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
What should I wear when using Kick Dummy?
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Relaxed clothing.
</div>
</div>
</div>
</div>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsethree">
How can I store away Kick Dummy?
</a>
</div>
<div id="collapsethree" class="accordion-body collapse in">
<div class="accordion-inner">
There is a quick release valve - so the Kick Dummy can be deflated effortlessly and folded away.
</div>
</div>
</div>
<div class="accordion" id="accordion3">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsefour">
What's on the DVD?
</a>
</div>
<div id="collapsefour" class="accordion-body collapse in">
<div class="accordion-inner">
The DVD is an instructional guide that leads you through the moves step by step. Once you have been instructed in the correct actions it is necessary to practice the moves. The DVD includes a great 3 minute routine which forms the basis of your day to day practice. Follow along for just two weeks and you will have learned these moves and made them your automatic response.
</div>
</div>
</div>
<div class="accordion" id="accordion4">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsefive">
How do I put clothing on Kick Dummy
</a>
</div>
<div id="collapsefive" class="accordion-body collapse in">
<div class="accordion-inner">
Dressing your Kick Dummy is optional. If you want your Dummy to wear shorts or cut-off jeans then you must put them on the Dummy before you inflate it. Put shorts on your Dummy in an deflated state and then inflate.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Youtube -->
<div class="container">
<div class="space">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="420" height="315" src="https://www.youtube.com/embed/25DXcFg1TFo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="social-media">
<a href="https://twitter.com/kaiserhaynes" class="twitter-follow-button" data-show-count="false">Follow @kaiserhaynes</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="fb-like" data-href="http://google.com" data-layout="standard" data-action="like" data-show-faces="false" data-share="true">
</div>
</div>
<div class="copyright">
David Haynes-Gunther &copy; 2015
</div>
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script src="js/jquery.stellar.min.js"></script>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>$('#stellar').stellar();</script>
<script>
$.stellar({
horizontalScrolling: false,
responsive: true
});
</script>
<script>
$(function() {
$('#[insert ID your tooltip here]').tooltip();
});
</script>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment