clueTip简单实用的信息提示框

本文将演示6中不同的提示框效果。cluetip提示框里的内容可以是HTML，也可以是ajax加载的的页面，并且clueTip还提供了丰富的API。

淘建站为您提供更多_导航菜单_图标导航_提示_clueTip，在此特别感谢您对我们的支持与厚爱！

HTML

<div class="example">
    <h3>1、基本设置</h3>
    <p><a class="title" href="#" title="提示窗口标题|内容.|内容分行。。。">鼠标滑向看看效果</a></p>
    <p>Below are quite a few <a class="title" href="#" title="提示窗口标题|内容.|内容分行。。。">examples</a> of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. For example, if you want to attach clueTips to all links with a class of "peanuts," you would simply write in your jQuery code: $('a.peanuts').cluetip();.</p>
</div>
<div class="example">
    <h4>2、Ajax加载页面</h4>
    <p><a class="basic" href="ajax.html" rel="ajax.html" title="加载AJAX页面">Ajax加载页面</a></p>
</div>

<div class="example">
    <h4>3、定制窗口宽度和隐藏标题栏: </h4>
    <p>This tip has a custom width of 200px. The clueTip title bar (heading) is hidden. <a class="custom-width" href="ajax.php?id=3" rel="ajax.php?id=3">Try me!</a></p>
</div>
<div class="example">
    <h4>4、需要手工关闭的窗口</h4>
    <p>his sticky clueTip has its "close" text in the title bar. It won't close until you close it, or until you hover over another clue-tipped link. It also displays an arrow on one of its sides, pointing to the invoking element. <a id="sticky" href="ajax.php?id=4" rel="ajax.php?id=4" title="点击右上角的关闭按钮才能关闭窗口">sticky clueTip with arrows</a></p>
</div>
<div class="example">
    <h4>5、无链接、自定义鼠标滑上去的样式</h4>
    <h5 title="Fancy Title!" id="ajax3.htm">Hover over me</h5>
</div>
<div class="example">
    <h4>6、加载本地内容</h4>
    <p><a class="load-local" href="#loadme" rel="#loadme">Hello</a></p>
    <div id="loadme" style="display:none">
        Hello! it's me.
    </div>
</div>

jQuery

$(function() {
    $('a.title').cluetip({
        splitTitle: '|'
    });
    $('a.basic').cluetip({
        width: '420px'
    });
    $('a.custom-width').cluetip({
        width: '200px',
        showTitle: false
    });
    $('#sticky').cluetip({
        sticky: true,
        closePosition: 'title',
        arrows: true
    });
    $('h5').cluetip({
        attribute: 'id',
        hoverClass: 'highlight'
    });
    $('a.load-local').cluetip({
        local: true,
        cursor: 'pointer'
    });
});

cluptip在用户点击了链接后，页面不会转向href地址，而是一点反应都没有，那怎么解决点了链接后直接转向该链接的页面呢？解决办法有：绑定a标签的click事件,代码如下：

$('a.basic).bind('click',function(){ 
    window.location.href=$(this).attr('href');; 
});