欢迎来到一团铺 - 第三方源码交易平台!
网站地图   帮助中心

一团铺

全国首家C2C平台

站长交易服务一站式平台-一团铺

热门搜索: 帝国cms    网站源码   

Tipso – 轻巧的jQuery提示框插件

  • 时间:2019-09-07 11:06 编辑:源码交易 来源:源码交易平台 阅读:52
  • 扫一扫,手机访问
摘要:Tooltip(提示框)是一种常见的效果,它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难,但如果你想不劳而获,可以试试 Tipso。Tipso 基于 jQuery,提供了很多配置,如:显示动画持续时间背景颜色文本颜色显

Tipso - 轻巧的jQuery提示框插件

Tooltip(提示框)是一种常见的效果,它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难,但如果你想不劳而获,可以试试 Tipso。

Tipso 基于 jQuery,提供了很多配置,如:

  • 显示动画持续时间

  • 背景颜色

  • 文本颜色

  • 显示位置(上/右/下/左)

  • 宽度

  • 偏移

  • 加载 ajax 内容

  • 回调函数

使用方法

1、引入文件

<link rel="stylesheet" href="css/tipso.css">
<script src="js/jquery.js"></script>
<script src="js/tipso.js"></script>

2、HTML

<span id="tip" data-tipso="dowebok">Tipso</span>

或者:

<span id="tip" title="内容来自 title 属性">Tipso</span>

使用属性 data-tipso 的值作为 tip 的内容是时,需要设置 useTitle: false;使用 title 属性作为 tip 的内容则设置 useTitle: true 或省略此参数。

3、JavaScript

$(function() {
    $('#tip').tipso({
        useTitle: false
    });
});

配置

属性/方法类型默认值说明
speed整数400动画持续时间
background字符串‘#55b555’背景颜色
color字符串‘#ffffff’文本颜色
position字符串‘top’显示位置
width整数200宽度
delay整数200延迟
offsetX整数0水平偏移
offsetY整数0垂直偏移
content字符串null内容
ajaxContentUrl字符串null异步加载内容
useTitle布尔值true使用 title 属性值作为内容
onBeforeShow函数null执行前的回调函数
onShow函数null显示前的回调函数
onHide函数null显示后的回调函数


  • 全部评论(0)
上一篇:已是第一篇内容
下一篇:已是最后一篇内容
资讯详情页最新发布上方横幅
最新发布的资讯信息
【网络热点|IT业界资讯】送吗网,据消息称已被调查。送吗源码网,至今打不开!(2019-10-02 23:21)
【网络热点|IT业界资讯】送码网 - 国内领先的网站源码交易、网络推广、SEO、建站任务交易服务平台(2019-09-30 16:11)
【系统环境|】友价源码如何集成阿里云OSS功能(2019-09-07 17:53)
【系统环境|】如何备份或还原数据库(如何备份网站)(2019-09-07 17:50)
【系统环境|】关于如何商场安装教程(专业版)提供详细安装步骤!(2019-09-07 17:47)
【网络热点|IT业界资讯】零基础小白走Web前端之路是否可行?答案是yes!(2019-09-07 12:34)
【网络热点|IT业界资讯】Web前端基础怎么学?html、css、JavaScript 知识架构图(2019-09-07 12:33)
【网络热点|IT业界资讯】商业源码怎么买(2019-09-07 12:28)
【网页前端|JS】Tipso – 轻巧的jQuery提示框插件(2019-09-07 11:06)
【网络热点|IT业界资讯】商业源码,你了解多少?(2019-09-06 00:02)
联系我们
Q Q:11124779
客服:18577914131
邮箱:etp@etuanpu
营业:09:00 - 19:00