下面我们再为作者头像和摘要按钮添加一个工具提示 ... 也就是用户把鼠标放在上面的时候，会弹出一个提示的内容 ...

打开 Bootstrap 项目的网站，点击 Javascript ... 然后点击 Tooltip ...

你可以在演示里看到这个工具提示的效果 ... 鼠标放在这些链接上面的时候，会弹出现提示内容 ... 你还可以定义弹出内容的方向 ... 一共有四个方向 ...

找到想要的效果 ，然后查看一下这个地方的元素 ... 你会看到代码的结构 ... 点击右键复制一下 ...

回到我们自己的网页代码 ... 粘贴到头像图片的上面 ...

<a href="#" rel="tooltip" data-placement="left" data-original-title="Tooltip on left">Tooltip on left</a>

去掉这组 <a> 标签之间的文字 ... 然后把头像图片的代码放在他们中间 ...

在这个 <a> 标签上有一些属性 ...要使用一个 rel 属性，属性的值是 tooltip ，data-placement 属性表示工具提示弹出的位置，left 代表从左边弹出来 ...

daga-original-title 属性里的值就是出现在工具提示里的内容 ... 我们改成作者的名称 ... 王皓 ...

另外，如果想让作者头像这个地方出现工具提示，我们还要使用一行 javascript 代码 ...

下面我们可以创建一个脚本文件 ... 把它放在 js 这个目录里面 ... 命名为 fenikso.js ... 你可以根据自己的想法去命名这个脚本文件 ...

打开这个文件 ... 然后先输入 ...

jQuery(function($){

});

在这个大括号之间，我们可以添加自定义的 javascript 代码 ...

$(' #main-content [rel=tooltip] ').tooltip()

这行代码的意思是，找到 id 为 main-content 元素包装的所有 rel 属性为 tooltip 的元素 ... 然后为这些元素启用 tooltip ，也就是工具提示 ...

回到网页代码 ... 我们要把刚才创建的 fenikso.js 文件链接到网页里面 ...

先复制一行链接脚本文件的代码 ... 然后修改一下，src 属性的值 ... js/fenikso.js

注意你的网页还要链接 jQuery 库，还有 bootstrap.js ... 顺序也很重要 ... 先链接 jQuery 库，然后是 bootstrap.js，最后是我们自定义的脚 本文件 ...

在网页的视图模式下 ... 鼠标放在作者头像的上面 ... 在他的左边，会出现工具提示的内容 ...