Qtip工具提示不起作用

时间:2012-11-18 05:14:34

标签: jquery tooltip qtip

晕!我是JQuery的新手,我正在尝试使用QTip进行简单的工具提示。我确信我已经按照正确的步骤操作,但工具提示似乎不起作用。这是代码:

<script type="text/javascript">
$(document).ready(function() {
    $('.select-here').qtip({
        content: {
            text: 'tooltip here',
            show: 'mouseover',
            hide: 'mouseout'
        },       
        style: {
            width: 400,
            height: 400
        }
    });
});
</script>

在身体上我写了这个

<div class="select-here">Text text text</div>

我错过了什么吗?有人可以帮我这个吗? 谢谢

1 个答案:

答案 0 :(得分:1)

试试此演示:演示 http://jsfiddle.net/Tdh4a/

http://craigsworks.com/projects/qtip/demos/content/basic

我认为show and hide是单独的属性而不是内容的子级:请在文档中查看:http://craigsworks.com/projects/qtip/docs/reference/#content

另外你会在qTip链接中注意到他们正在推广qTip2而不是qTip作为其过时。休息演示应该有助于您的事业。 B-)

<强>代码

$(document).ready(function() {

    $(".select-here").qtip({
        content: {
            text: "HULK Me HULK HULK",
            title: {
                text: "Title",
                button: true
            }
        },
        show: {
            event: 'click',
            solo: true
        },
        hide: {
            fixed: true,
            event: 'unfocus'
        },
        position: {
            target: 'mouse',
            viewport: $(window),
            adjust: {
                method: 'flip shift',
                mouse: false
            }
        },
        style: {
            tip: false,
            widget: false
        }
    });


});​