Question

有人会向我展示一个简单的示例，说明如何设置和使用qTip jQuery插件，工具提示显示在我将鼠标悬停在图像上方的左下方。

我尝试过关注the qTip site中的演示/示例，但似乎无法使其正常运行。

我不确定是否需要在文档中包含HTML结构，如果是，我在哪里放置它？

这个插件是否也需要某种CSS文件？

Answer 1

我认为问题源于新的qTip版本和jQuery之间的不兼容性。

我花了最后一小时用qTip测试代码，试图找出我的代码拒绝工作的原因，并在查看forums之后看看我是否能找到类似的问题我注意到以下内容线程中的代码运行完美，但如果它与更新版本的jQuery交换，则会产生错误。

<html>
<head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>


        <script type="text/javascript">
        $( document ).ready( function( ) {
            $.fn.qtip.styles.tooltipDefault = {
                background  : '#132531',
                color       : '#FFFFFF',
                textAlign   : 'left',
                border      : {
                    width   : 2,
                    radius  : 4,
                    color   : '#C1CFDD'
                },
                width       : 220
            }

            // we are going to run through each element with the classRating class
            $( '.classRating' ).each( function( ) {
                var rating = $( this ).attr( 'rating' );

                // the element has no rating tag or the rating tag is empty
                if ( rating == undefined || rating == '' ) {
                    rating = 'I have not yet been rated.';
                }
                else {
                    rating = 'The rating for this is ' + rating + '%';
                }

                // create the tooltip for the current element
                $( this ).qtip( {
                    content     : rating,
                    position    : {
                        target  : 'mouse'
                    },
                    style       : 'tooltipDefault'
                } );
            } );
        } );

        </script>
</head>
<body>
    <div id="SomeID1" class="classRating" rating="73">I have a rating</div>
    <div id="SomeID2" class="classRating" rating="66">I have a rating</div>
    <div id="SomeID3" class="classRating" rating="">I have a rating but it is empty</div>
    <div id="SomeID4" class="classRating">I dont have a rating</div>
</body>
</html>

我下载了jQuery 1.3.2 from the Google Code website，这个例子现在对我来说非常合适。我很快就会开始根据我的需要定制这个代码，看看是否还有其他问题，但是对于仍然遇到这个问题的人，我希望这篇文章很有用。

编辑：看起来这是版本不兼容问题。文档网站上的这个简单代码现在与这些相同版本完美配合。希望这对你有所帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>

    </head>
    <body>
        <a href="#" title="Hello World" class="example">Test</a>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // By suppling no content attribute, the library uses each elements title attribute by default
                $('a[href][title]').qtip({
                    content: {
                        text: false // Use each elements title attribute
                    },
                    style: 'cream' // Give it some style
                });

                // NOTE: You can even omit all options and simply replace the regular title tooltips like so:
                // $('#content a[href]').qtip();
            });
        </script>
    </body>
</html>

编辑2：有一个新版本的qTip在工作，所以它可能值得等待，但是如果你想使用qTip与最新版本的jQuery，那么你可以下载一个qTip的nightly builds。使用上面的例子，我用最新的每晚构建交换了最新的jQuery（1.4.2）的两个脚本，它似乎有效。

Answer 2

正确的我认为我知道你的东西只是展示了如何将qTip附加到html之后，那些例子并不是很好。

下面的示例将显示qTip关闭图像并显示尖端居中和图像右侧，呈现双色调。

<html>
<head>
<script src="/js/jquery-compressed-1.4.2.js" type="text/javascript"></script>
<script src="/js/jquery.qtip-1.0.min.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
                    // Create the tooltips only on document load
                    $(document).ready(function() {
                    // Match all link elements with href attributes within the content div
                    $('#claimform a[rel=tip]').qtip({
                            content: { text: true
                            },
                            style: {
                                width: 250,
                                tip: 'leftMiddle',
                                color: 'white',
                                background:'#66CC33',
                                name: 'green'
                            },
                            position: {
                                corner: {   target: 'rightMiddle',
                                            tooltip: 'leftMiddle'
                                        },
                                adjust: { x: 20, y: 0 }

                            }
                        });
                    });
          </script>
<div id="claimform">
<a href="#" rel="tip" title="Your customer ID as shown on the top right hand side of your papaer bill that you should have received through the post"><img src="/images/css/tip.gif" alt="tip" class="tip" /></a>
</div>
</body>
</html>

关于这一点需要注意的是我使用的是jquery 1.4.2，这不适用于qTip的压缩版本的典型下载，你需要使用内部版本号25

http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/25

Answer 3

在ASP.NET中，我包含了jQuery-1.4.2.min.js和jquery.qtip-1.0.js。

没有CSS，它应该可以正常工作。

$(document).ready(function() {
    $("#<%= txtUsername.ClientID %>").qtip({
        content: 'Your registered username',
        style:
    {
        name: 'blue',
        tip: 'leftMiddle'
    },
        position:
    {
        corner:
        {
            target: 'rightMiddle',
            tooltip: 'leftMiddle'
        }
    }
    });
}

Answer 4

您还可以按照qTip论坛中的说明操作：http://craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does-not-work-with-latest-jquery-release。通过修改qTip插件中的一行代码（尽管很难在'min'版本中找到代码），您将恢复与jQuery的兼容性。

基本上，改变：

if(typeof $(this).data('qtip') == 'object')

要：

if(typeof $(this).data('qtip') === 'object' && $(this).data('qtip'))

应该这样做;为我工作。

Answer 5

qTip网站上提到的HTML结构只是使用插件时创建的html的一个示例。它不是代码的一部分，需要添加到页面才能使其工作。

如何使用jQuery qTip？

5 个答案: