素材8网-专注前端素材！
来源：https://www.sucai8.cn/41842.html

jQuery和bootstrap工具提示效果下载

  • 862
  • 0
  • 0


1. 引入jQuery和Tooltipster's文件
你可以 引入 jQuery 和 Tooltipster's CSS 还有 JavaScript 文件在你的页面
  1. <head>
  2.     <link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />

  4.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  5.     <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
  6. </head>
复制代码
兼容提醒: jQuery 1.7已经足够了,除非你需要SVG兼容IE(需要使用jQuery 1.10+). Tooltipster 不能正常运行在IE9中引用jQuery1.8
2. 设置你的HTML
想让一个元素加入工具提醒, 我们会给他加上一个类名class 'tooltip' . 你也可以选择使用自定义的类名或选择器(请继续往下看), 由你决定. 之后, 我们将设置标题title 属性为我们想要的提示. 这里有几个栗子:
  1. // 在图片加入工具提醒:
  2. <img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

  4. // 在文字加入工具提醒 (span, div or whatever):
  5. <span class="tooltip" title="This is my span's tooltip message!">Some text</span>
复制代码
3. 激活 Tooltipster
我们要做的最后一件事是激活Tooltipster. 我们需要在头部得问 </head> 标签加入script并激活Tooltipster (你可以选择使用自己定义的选择器 - 我们的栗子是使用 'tooltip' class):
  1. <head>
  2.     ...
  3.     <script>
  4.         $(document).ready(function() {
  5.             $('.tooltip').tooltipster();
  6.         });
  7.     </script>
  8. </head>
复制代码
.......详见demo 查看演示。
相关素材
jQuery和bootstrap工具提示效果下载
  • 东西南北中 刚刚下载了一个素材
  • 陈金龙 刚刚下载了一个素材
  • Notluckyenough 刚刚下载了一个素材
  • 肖明亮 刚刚下载了一个素材
  • 海森 刚刚下载了一个素材
  • EMBRZ 刚刚下载了一个素材
  • qq小叶sNH 刚刚下载了一个素材
  • 琪琪琪琦有此理 刚刚下载了一个素材
  • 天龙 刚刚下载了一个素材
  • qq1Szl 刚刚下载了一个素材
  • 栀子花与神兔 刚刚下载了一个素材
  • 胡椒 刚刚下载了一个素材
  • qqAFengu9a 刚刚下载了一个素材
  • qq随缘Ybc 刚刚下载了一个素材
  • 识于微时别于经年 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5
返回顶部返回顶部
发布主题