在线建站培训
您的位置: 魔客吧站长论坛网页特效查看内容

非常实用的jQuery Tooltip工具提示

轮子 发表于 2017-7-17 12:05:09 | 栏目:网页特效
网站特效
效果: 其它 
脚本: jQuery特效 
125941vrp7own6xprzlwn7.jpg.thumb.jpg


简要教程


这是一款简单且非常实用的jQuery Tooltip工具提示插件。该Tooltips插件没有CSS,意味着你可以自定义你自己的Tooltip样式。你可以在Tooltip中显示任何内容:文本、DOM元素、图片等等。它的特点有:
◦源文件非常小。
◦没有依赖CSS文件,你可以自己定制。
◦可以Tooltip任何你需要的东西。

 安装

可以通过bower来安装这个Tooltip插件:
$ bower install tinytip               


 使用方法


<!-- first include jQuery library -->
<script src="./jQuery.js"></script>
<!-- Then tinytip plugin -->
<script src="./tinytip.js"></script>
$('.block.link').tinytip({
    //position [top|bottom|left|right]
    position : 'bottom',

    //tooltip position fix [+-][yx]
    fix : {
        top : -10,
        left: +20
    },

    //animation effect start position [+,-][top,left]
    //example +10 => animate up 10 pixels
    animation : {
        top : +10,
        left: -5,
    },

    //animation speed in milliseconds
    speed : 100,

    //tooltip text, or can be a jQuery object of
    //selected element
    tooltip : "Hi There" || $('.some-selector'),

    //when to show tooltip event (default: mouseenter)
    on : 'click',

    //when to hide tooltip event (default: mouseleave)
    off: 'click'

    //prevent tooltip close when hover over it
    preventClose : true,

    //callback function fired once the tooltip completely loaded
    //passes tooltip element jQuery object (e)
    onLoad : function(e){
        e.text('lool');
    },

    //add custom class to this tooltip
    addClass : 'unique'
});               


 配置参数
◦position:类型:string。tooltip元素放置在何处,选项有:[top|bottom|left|right]。
◦fix:类型:object。将tooltip位置固定。 ◦top [+|-]number) set top position
◦left [+|-]number) set left position

◦animation:类型:object。tooltip动画开始的位置。 ◦top [+|-]number) set starting top position
◦left [+|-]number) set starting left position

◦speed:类型:number。动画的速度,单位毫秒。
◦easing:类型:number。如果使用jQuery easing插件,配置easing效果选项。默认值:linear。
◦tooltip:类型:string|jQuery Object。tooltip的text/html/jQuery元素选择器。
◦on:类型:string。触发tooltip的事件。默认值:mouseenter。
◦off:类型:string。隐藏tooltip的事件。默认值:mouseleave。
◦preventClose:类型:boolean。设置为true在离开或滑过tooltip元素的时候隐藏tooltip。默认值为false。
◦onLoad:类型:function。tooltip加载完成后的回调函数。函数会传递一个tooltip的jquery对象。
◦addClass:类型:string。定制当前tooltip的class名称。
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价:免费  [充值金币]  [免费赚金币]  [关于会员等级] 
下载权限: 无下载限制  [购买VIP]   [免费升VIP]

说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵犯您的版权,请及时联系我们,我们将尽快处理。