<!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 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" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body><script src="/demos/googlegg.js"></script>
<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>
<
jQuery Tooltip气泡提示工具栏代码.zip （13个子文件） 
font-awesome-4.3.0 css 
font-awesome.min.css 23KB fonts FontAwesome.otf 84KB fontawesome-webfont.eot 55KB fontawesome-webfont.woff 64KB
fontawesome-webfont.svg 280KB fontawesome-webfont.ttf 110KB js jquery.toolbar.js 11KB jquery-1.11.0.min.js 94KB css jquery.toolbar.css 10KB default.css 707B documentation.css 1KB prettify.css 678B
index.html 14KB资源评论
