页面的head部分，需远程调用bootstrap.min.css文件和两个必要的CSS文件，代码如下：

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/tooltip.css">
<style type="text/css">
	span.demo { border-bottom: 2px dotted; cursor: pointer; color: #E37274; }
</style>

页面的body部分，设置好div容器里的文本段落，代码如下：

<div class="container">
	<h1>jQuery消息提示插件tooltip.js</h1>
	<h3>基本使用</h3>
	<p>那一页薄纸，几字落下，才知道，流年似水，太过匆匆，一些故事来不及真正的开始，犹如一部戏并未进入最精彩的情节，便已成了昨天，你我都成了记忆里的旧光影，皆是过客。<span id="demo-1" class="demo">莫问前路几何</span>，曲起生歌，婉转悠扬。只是，不再是一张如花的笑脸。</p>
	<p>也许有一天，所有的不解，所有的迷茫，所有的不安，都将如天上的云朵，一尘不染，轻轻飘向梦的深处，留下一缕香，嫣然岁月的模样。你依然站在皎洁的月光下，打开那壶陈年的酒，慢慢品尝，醉过方知酒浓，情深方知意重。</p>
	<p>习惯在寂静的晚上，登高望远，看着万家灯火，数一数那些窗，今晚，又会有多少悲欢离合重复上演，温柔的伤感。你说，若有缘，千里终会来相会，携手红尘，若无缘，近在咫尺不相逢，终将是陌路。</p>
	<hr>
	<h3>带参数</h3>
	<p>那一页薄纸，几字落下，才知道，流年似水，太过匆匆，一些故事来不及真正的开始，犹如一部戏并未进入最精彩的情节，便已成了昨天，你我都成了记忆里的旧光影，皆是过客。<span id="demo-2" class="demo">莫问前路几何</span>，曲起生歌，婉转悠扬。只是，不再是一张如花的笑脸。</p>
	<p>也许有一天，所有的不解，所有的迷茫，所有的不安，都将如天上的云朵，一尘不染，轻轻飘向梦的深处，留下一缕香，嫣然岁月的模样。你依然站在皎洁的月光下，打开那壶陈年的酒，慢慢品尝，醉过方知酒浓，情深方知意重。</p>
	<p>习惯在寂静的晚上，登高望远，看着万家灯火，数一数那些窗，今晚，又会有多少悲欢离合重复上演，温柔的伤感。你说，若有缘，千里终会来相会，携手红尘，若无缘，近在咫尺不相逢，终将是陌路。</p>
</div>

页面的底部，需引入jQuery库、tooltip插件，并设置好相应参数，代码如下：

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#demo-1').tooltip({text: '这是一个Tooltip！'});
  $('#demo-2').tooltip({text: '这是一个Tooltip！',fontSize: '14px',
    theme: 'light',
    fontFamily: "'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif",
    delay: 400});
});
</script>