1.看看插件效果吧
2. html 文件 ：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery-1.12.4.min.js"></script>
<script src="./guideTips.js"></script>
<style>
ul{position: relative;padding: 0 -3px;list-style: none; 600px;margin: 0 auto;box-sizing: border-box}
li{float: left; 33.33%;padding: 20px;box-sizing: border-box}
li img{ 100%;height: 100%;}
</style>
</head>
<body style="position: absolute; 100%;height: 100%;margin: 0">
<p style="margin: 50px;text-align: center">
<span class="header-option-save" style="background: #fff;">第二个位置</span>
</p>
<p style="margin: 50px;text-align: center">
<input id="datepicker" type="text" value="">
</p>
<ul class="flowLayout-box">
<li class="flowLayout-item"> <img id="testimg" class="flowLayout-pic" src="./img/u17.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u19.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u114.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u116.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u118.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u120.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u132.png" alt=""></li>
<div style="clear: both"></div>
</ul>
</body>
</html>
3.引入插件
插件地址： http://files.cnblogs.com/files/jiebba/guideTsips.js
4.调用：
$(function () {
var option = {
list:[
{obj:$('#testimg'),msgW:300,msg:'第一个位置，可以点击这张图片来浏览，可以下载这张图破',img:2}, //第一个位置对象
{obj:$('.header-option-save'),msgW:300,msg:'第二个位置，这是整个页面的标题，来看看吧',img:3}, //第二个位置对象
{obj:$('#datepicker'),msgW:300,msg:'第三个位置，这里可以搜索图片，输入你要搜索的关键词吧',img:2}
],
img:{url:'./img/tips-arrow.png','52.5px',height:'48px'}
}
var g = new GuideTips(option)
})
/*
* img 图片url 方向图标
* list{ 提示对象列表
* obj 提示对象
* msgW 提示文字宽度
* msg 提示文字
* img 1:指向右下，2：指向左上，3：指向右上，default :指向左下
* }
* */
img 图片
可以查看效果了！
代码仅供参考，具体功能可以自己扩展。
个人博客 ：很多好用的 npm 包 ， 可以看看 https://gilea.cn/
http://www.cnblogs.com/jiebba 我的博客，来看吧！