基于bootstrap3响应式Tooltip提示插件

基于bootstrap3响应式Tooltip提示插件

图中的提示框就是效果

如果有接入Tooltip,只需调用即可,没有再接入此插件。

ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该bootstrap jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。
该jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。它的特点有:

支持4个上下左右4个方向显示tooltip。

不限制背景颜色。

不限制字体颜色。

可以自由设置tooltip的边框颜色。

支持各种触发tooltip的事件,如:click、hover、focus 或手动触发。

基于HTML5、CSS3和jQuery制作。

调用方式:

引入ggtooltip.css和ggtooltip.js文件以及依赖文件。

<link href=”css/ggtooltip.css” rel=”stylesheet” /><!–必要CSS–>

<script src=”js/jquery-2.1.3.min.js”></script>

<script src=”js/ggtooltip.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘.gg-examples1 button’).ggtooltip();
$(‘.gg-examples2 a’).ggtooltip();
});
</script>

在公共块div中引入类名:gg-examples2

链接引入【两种方式】

<button type=”button” class=”btn btn-default” data-placement=”top” title=”Tooltip on top”>顶部的工具提示</button>

<a href=”https://www.xxx.com/” data-placement=”top” title=”立即访问”>查看详情</a>

若下载地址失效请在下方留言或联系客服

下载权限

查看
  • K
    免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
声明:本站部分文章来源于网络,如有危害到您的合法权益请联系客服

给TA打赏
共{{data.count}}人
人已打赏
7b2技术教程

小工具-日期、古诗一言html

2022-11-3 21:34:02

技术教程

阿里云境内服务器备案流程

2022-11-22 15:35:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索