Mootools 1.2教程(19)——Tooltips（3）

代码示例

在这个示例中，我们将创建两个不同的Tip插件实例，这样我们就可以有两个不同样式的工具提示。我们还将集成我们上面看到的选项、事件和方法。

参考代码： 

var customTips = $$('.tooltip'); 

var toolTips = new Tips(customTips, { 
    // 这将设置工具提示显示的延迟时间 
    showDelay: 1000,    // 默认是100 

    // 这将设置工具提示隐藏的延迟事件 
    hideDelay: 100,   // 默认是100 

    // 这将给工具提示的容器div添加一个CSS样式 
    // 这样就可以在一个页面上 
    // 有两个不同样式的工具条提示 
    className: 'anything', // 默认是null 

    // 这将设置x和y的偏移值 
    offsets: { 
        'x': 100,       // 默认是16 
        'y': 16        // 默认16 
    }, 

    // 这将设置工具提示是否跟随鼠标 
    // 设为true将不会跟随鼠标 
     fixed: false,      // 默认是false 

    // 如果你在选项之外调用这个函数 
    // 并把这个函数留在这里 
    // 它就闪一下，并有一个平滑的渐变效果 
    onShow: function(toolTipElement){ 
        // 传递进来tooltip对象 
        // 你可以让它们渐变到完全不透明 
        // 或者让它们有一点点透明 
        toolTipElement.fade(.8); 
        $('show').highlight('#FFF504'); 
    }, 
    onHide: function(toolTipElement){ 
        toolTipElement.fade(0); 
        $('hide').highlight('#FFF504'); 
    } 
}); 

var toolTipsTwo = new Tips('.tooltip2', { 
    className: 'something_else', // 默认是null 
}); 

// 你可以用.store();方法来改变rel的值 
// 从而改变工具提示的值 
// 你可以使用下面的代码 
$('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.'); 
$('tooltipID1').store('tip:title', 'Here is a new title.'); 

// 下面的代码将改不会改变工具提示的文本 
$('tooltipID1').set('rel', 'This will not change the tooltips text'); 
$('tooltipID1').set('title', 'This will not change the tooltips title'); 

toolTips.detach('#tooltipID2'); 
toolTips.detach('#tooltipID4'); 

更多学习

通读一遍MooTools文档中的Tips这一节。另外，这里还有David Walsh写的一篇很不错的关于定制Mootools Tips的文章。

远程下载：下载一个包含你所需要的全部东西的zip压缩包

asp之家下载地址：mootorial_day19_tooltips.zip （36.71 KB）