以下是 jQuery+HTML5实现tooltip样式代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+HTML5实现tooltip样式代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet' href='font-awesome-4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/documentation.css">
<link href="css/prettify.css" rel="stylesheet">
<link href="css/jquery.toolbar.css" rel="stylesheet" />
</head>
<body>
<section class="htmleaf-container">
<div class="tooltip-container normal">
<section>
<h2>Examples</h2>
<span>Default</span>
<div class="samples">
<div data-toolbar="user-options" class="btn-toolbar pull-left"><i class="fa fa-cog"></i></div>
<div class="clear"></div>
</div>
<span>Colorful</span>
<div class="samples">
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-primary pull-left" data-toolbar-event="click" data-toolbar-style="primary"><i class="fa fa-cog"></i></div>
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-danger pull-left" data-toolbar-style="danger"><i class="fa fa-cog"></i></div>
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-warning pull-left" data-toolbar-style="warning"><i class="fa fa-cog"></i></div>
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-info pull-left" data-toolbar-style="info"><i class="fa fa-cog"></i></div>
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-success pull-left" data-toolbar-style="success"><i class="fa fa-cog"></i></div>
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-info-o pull-left" data-toolbar-style="info-o"><i class="fa fa-cog"></i></div>
<div class="clear"></div>
</div>
<span>Shades</span>
<div class="samples">
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-light pull-left" data-toolbar-style="light"><i class="fa fa-cog"></i></div>
<div data-toolbar="user-options" class="btn-toolbar btn-toolbar-dark pull-left" data-toolbar-style="dark"><i class="fa fa-cog"></i></div>
<div class="clear"></div>
</div>
<span>Customizable</span>
<div class="samples">
<div data-toolbar="transport-options" class="btn-toolbar btn-toolbar-primary pull-left" data-toolbar-event="click" data-toolbar-style="primary"><i class="fa fa-plane"></i></div>
<div data-toolbar="set-01" class="btn-toolbar btn-toolbar-danger pull-left" data-toolbar-style="danger"><i class="fa fa-line-chart"></i></div>
<div data-toolbar="set-02" class="btn-toolbar btn-toolbar-warning pull-left" data-toolbar-style="warning"><i class="fa fa-apple"></i></div>
<div data-toolbar="set-03" class="btn-toolbar btn-toolbar-info pull-left" data-toolbar-style="info"><i class="fa fa-bitcoin"></i></div>
<div data-toolbar="set-04" class="btn-toolbar btn-toolbar-success pull-left" data-toolbar-style="success"><i class="fa fa-heart"></i></div>
<div data-toolbar="transport-options-o" class="btn-toolbar btn-toolbar-info-o pull-left" data-toolbar-style="info-o"><i class="fa fa-truck"></i></div>
<div class="clear"></div>
</div>
<span>Animations</span>
<div class="samples">
<div data-toolbar="transport-options" data-toolbar-animation="standard" class="btn-toolbar btn-toolbar-primary pull-left" data-toolbar-event="click" data-toolbar-style="primary"><i class="fa fa-plane"></i></div>
<div data-toolbar="transport-options" data-toolbar-animation="flip" class="btn-toolbar btn-toolbar-danger pull-left" data-toolbar-style="danger"><i class="fa fa-bicycle"></i></div>
<div data-toolbar="transport-options" data-toolbar-animation="grow" class="btn-toolbar btn-toolbar-warning pull-left" data-toolbar-style="warning"><i class="fa fa-car"></i></div>
<div data-toolbar="transport-options" data-toolbar-animation="flyin" class="btn-toolbar btn-toolbar-info pull-left" data-toolbar-style="info"><i class="fa fa-train"></i></div>
<div data-toolbar="transport-options" data-toolbar-animation="bounce" class="btn-toolbar btn-toolbar-success pull-left" data-toolbar-style="success"><i class="fa fa-subway"></i></div>
<div data-toolbar="transport-options" data-toolbar-animation="grow" class="btn-toolbar btn-toolbar-info-o pull-left" data-toolbar-style="info-o"><i class="fa fa-truck"></i></div>
<div class="clear"></div>
</div>
<br><br><br>
<div class="example">
<h3>Creating Buttons</h3>
<p>The button can be created by adding the class .btn-toolbar to a html element e.g. a div, a, span, button, while the colors can be controller with different CSS classes.</p>
<section class="left">
<br><br>
<div class="row">
<div class="btn-toolbar"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-primary"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-primary">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-danger"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-danger">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-warning"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-warning">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-info"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-info">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-success"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-success">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-info-o"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-info-o">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-dark"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-dark">...</div></pre>
</div>
<div class="row">
<div class="btn-toolbar btn-toolbar-light"><i class="fa fa-cog"></i></div>
<pre class="prettyprint"><div class="btn-toolbar btn-toolbar-light">...</div></pre>
</div>
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
<h2>Options</h2>
<br>
<div class="example">
<h3>Content</h3>
<p>This should be the ID of the element which contains your toolbar icons.</p>
<section class="left">
<div data-toolbar="content-option" class="btn-toolbar"><i class="fa fa-cog"></i></div>
</section>
<section class="right">
<pre class="prettyprint">
$('#button').toolbar({
content: '#toolbar-options',
});</pre>
</section>
<div class="clear"></div>
<h3>Position</h3>
<p>The toolbar can be positioned to the top, left, right or bottom of the element. Set the value of position to where you want the toolbar to appear.</p>
<section class="left">
<div data-toolbar="position-option" class="btn-toolbar"><i class="fa fa-cog"></i></div>
</section>
<section class="right">
<pre class="prettyprint">
$('#button').toolbar({
content: '#toolbar-options',
position: 'bottom'
});</pre>
</section>
<div class="clear"></div>
</div>
<div class="example">
<h3>Style</h3>
<p>The toolbar color can be set through the style option. It accepts the same values as the css buttons. You can mix and match styles for the buttons and toolbars to create any color combo you want (but genrally the same styles go together).</p>
<section class="left">
<div data-toolbar="style-option" class="btn-toolbar btn-toolbar-primary"><i class="fa fa-cog"></i></div>
</section>
<section class="right">
<pre class="prettyprint">
$('#button').toolbar({
content: '#toolbar-options',
position: 'bottom',
style: 'primary'
});</pre>
</section>
<div class="clear"></div>
</div>
<div class="example">
<h3>Animation</h3>
<p>The toolbar animation can be set through the animation option. There are five different options for the animation which can be viewed in the example above. From left to right the options are standard, flip, grow, flyin, and bounce.</p>
<section class="left">
<div data-toolbar="animation-option" class="btn-toolbar btn-toolbar-primary"><i class="fa fa-cog"></i></div>
</section>
<section class="right">
<pre class="prettyprint">
$('#button').toolbar({
content: '#toolbar-options',
position: 'bottom',
style: 'primary',
animation: 'flip'
});</pre>
</section>
<div class="clear"></div>
</div>
</section>
<div id="user-options" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-user"></i></a>
<a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-edit"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
<a href="#"><i class="fa fa-circle"></i></a>
</div>
<div id="transport-options" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-plane"></i></a>
<a href="#"><i class="fa fa-car"></i></a>
<a href="#"><i class="fa fa-bicycle"></i></a>
</div>
<div id="transport-options-2" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-plane"></i></a>
<a href="#"><i class="fa fa-car"></i></a>
<a href="#"><i class="fa fa-bicycle"></i></a>
</div>
<div id="transport-options-o" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-car"></i></a>
<a href="#"><i class="fa fa-bicycle"></i></a>
<a href="#"><i class="fa fa-truck"></i></a>
<a href="#"><i class="fa fa-plane"></i></a>
</div>
<div id="set-01-options" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-area-chart"></i></a>
<a href="#"><i class="fa fa-bar-chart"></i></a>
<a href="#"><i class="fa fa-line-chart"></i></a>
</div>
<div id="set-02-options" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-android"></i></a>
<a href="#"><i class="fa fa-apple"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
<div id="set-03-options" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-bitcoin"></i></a>
<a href="#"><i class="fa fa-eur"></i></a>
<a href="#"><i class="fa fa-cny"></i></a>
</div>
<div id="set-04-options" class="toolbar-icons hidden">
<a href="#"><i class="fa fa-heart"></i></a>
<a href="#"><i class="fa fa-heart-o"></i></a>
<a href="#"><i class="fa fa-heartbeat"></i></a>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/prettify.js"></script>
<script src="js/jquery.toolbar.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Define any icon actions before calling the toolbar
$('.toolbar-icons a').on('click', function( event ) {
event.preventDefault();
});
$('div[data-toolbar="user-options"]').toolbar({
content: '#user-options',
position: 'top',
});
$('div[data-toolbar="transport-options"]').toolbar({
content: '#transport-options',
position: 'top',
});
$('div[data-toolbar="transport-options-o"]').toolbar({
content: '#transport-options-o',
position: 'bottom',
event: 'click',
hideOnClick: true,
});
$('div[data-toolbar="content-option"]').toolbar({
content: '#transport-options',
});
$('div[data-toolbar="position-option"]').toolbar({
content: '#transport-options',
position: 'bottom',
});
$('div[data-toolbar="style-option"]').toolbar({
content: '#transport-options',
position: 'bottom',
style: 'primary',
});
$('div[data-toolbar="animation-option"]').toolbar({
content: '#transport-options',
position: 'bottom',
style: 'primary',
animation: 'flyin'
});
$('div[data-toolbar="event-option"]').toolbar({
content: '#transport-options',
position: 'bottom',
style: 'primary',
event: 'click',
});
$('div[data-toolbar="hide-option"]').toolbar({
content: '#transport-options',
position: 'bottom',
style: 'primary',
event: 'click',
hideOnClick: true
});
$('#link-toolbar').toolbar({
content: '#user-options',
position: 'top',
event: 'click',
adjustment: 35
});
$('div[data-toolbar="set-01"]').toolbar({
content: '#set-01-options',
position: 'top',
});
$('div[data-toolbar="set-02"]').toolbar({
content: '#set-02-options',
position: 'left',
});
$('div[data-toolbar="set-03"]').toolbar({
content: '#set-03-options',
position: 'bottom',
});
$('div[data-toolbar="set-04"]').toolbar({
content: '#set-04-options',
position: 'right',
});
$(".download").on('click', function() {
mixpanel.track("Toolbar.Download");
});
$("#transport-options-2").find('a').on('click', function() {
$this = $(this);
$button = $('div[data-toolbar="transport-options-2"]');
$newClass = $this.find('i').attr('class').substring(3);
$oldClass = $button.find('i').attr('class').substring(3);
if($newClass != $oldClass) {
$button.find('i').animate({
top: "+=50",
opacity: 0
}, 200, function() {
$(this).removeClass($oldClass).addClass($newClass).css({top: "-=100", opacity: 1}).animate({
top: "+=50"
});
});
}
});
$('div[data-toolbar="transport-options-2"]').toolbar({
content: '#transport-options-2',
position: 'top',
});
});
</script>
</body>
</html>CSS代码(default.css):
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
/**,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*/
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;/*font-weight:500;font-size:1.05em;*/
font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;overflow:hidden;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;background:#66677c;}
.htmleaf-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.htmleaf-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}
分享到QQ
分享到微博
微信扫一扫
