Как использовать jQuery qTip?

Question

Как использовать jQuery qTip?

Был бы кто-то показывать мне простой пример того, как установить и использовать плагин qTip jQuery для подсказки для отображения в нижней левой части того, где я нависаю над изображением.

Я попробовал после демонстраций/примеров от qTip сайта, но просто, может казаться, не получаю его работа.

Я не уверен, если я должен включать Структуру HTML в документацию и если так, куда я помещаю ее?

Этот плагин также требует какого-то файла CSS?

31

jquery jquery-plugins

задан halfer 7 August 2018 в 12:28

3 ответа

Другие вопросы по тегам:

jquery jquery-plugins

Похожие вопросы:

score 2 · Answer 1

В 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'
        }
    }
    });
}

score 19 · Answer 2

Я считаю, что проблема связана с несовместимостью между новыми версиями qTip и jQuery.

Я провел последний час, тестируя код с помощью qTip, чтобы попытаться выяснить, почему мой код отказывался работать, и после просмотра форумов, чтобы узнать, могу ли я найти похожие проблемы, я заметил, что следующий код в потоке работает отлично, но если его заменить более новой версией 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 с веб-сайта Google Code, и теперь этот пример отлично работает. Я скоро начну приспосабливать этот код к своим потребностям, чтобы увидеть, есть ли какие-либо другие проблемы, но для тех, кто все еще страдает от этой проблемы, я надеюсь, что этот пост будет полезен.

РЕДАКТИРОВАТЬ: Похоже, это проблема несовместимости версий. Этот простой код с веб-сайта документации теперь отлично работает с этими же версиями. Надеюсь, это будет полезно для вас!

<!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. Используя приведенный выше пример, я заменил оба скрипта на последнюю версию jQuery (1.4.2) на последнюю ночную сборку, и, похоже, это работает.

score 2 · Answer 3

Вы также можете следовать инструкциям на форумах qTip здесь: http://craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does -not-work-with-last-jquery-release. Изменив одну строку кода в плагине qTip (хотя код в минимальной версии найти сложно), вы восстановите совместимость с jQuery.

По сути, измените:

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

На:

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

Это должно сработать; работал на меня.