qtip2 tooltip - мышь tracker - как найти содержимое множества элементов управления с одним и тем же классом? - PullRequest
Новая
       34

qtip2 tooltip - мышь tracker - как найти содержимое множества элементов управления с одним и тем же классом?

0 голосов
/ 07 июня 2011

У меня есть много элементов управления, как показано ниже: 

                <div style="display: inline;">
                    <span id="cvCaptcha-Target" class="ttTarget">
                        <asp:CustomValidator ID="cvCaptcha" runat="server" Display="Dynamic" OnServerValidate="cvCaptcha_ServerValidate">
                            <asp:Image ID="img4cvCaptcha" CssClass="imgValidate" runat="server" AlternateText="attention"
                                ImageUrl="~/Images/Login/Exclamation.png" />
                        </asp:CustomValidator>
                    </span>
                    <div id="cvCaptcha-Content" class="ttContent">
                       captcha is incorrect!!!
                    </div>
                </div>

как вы видите, я поместил ttContent каждого элемента управления в нижнюю часть этого (внутри div), и у меня есть много элементов управления с классом ttTarget ...

коды qtip2 для мышки подсказки, как показано ниже: 

        $('#target').qtip({
            content: 'i am tool tip',
            position: {
                my: 'top left',
                target: 'mouse',
                viewport: $(window), // Keep it on-screen at all times if possible
                adjust: {
                    x: 10, y: 10
                }
            },
            hide: {
                fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
            },
            style: 'ui-tooltip-shadow'
        });

когда мы используем id s для qtip, все очень просто, и мы легко можем найти содержимое цели!
но в моем сценарии у меня есть много идентификаторов, которые я не знаю, как я могу узнать их содержание по верхнему коду!

Я имею в виду: 

        $('.ttTarget').qtip({
            content: '______________' -> here is my problem (how can i find ttContents),
            position: {
                my: 'top left',
                target: 'mouse',
                viewport: $(window), // Keep it on-screen at all times if possible
                adjust: {
                    x: 10, y: 10
                }
            },
            hide: {
                fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
            },
            style: 'ui-tooltip-shadow'
        });

заранее спасибо

1 Ответ

0 голосов
/ 07 июня 2011

Путь 1: 

$(function () {
            $('.ttTarget').qtip({
                overwrite: false,
                content: {
                    text: function (api) {
                        return $(this).parent('div').find('div.ttContent').html();
                    }
                },
                position: {
                    my: 'top left',
                    target: 'mouse',
                    viewport: $(window),
                    adjust: {
                        x: 10, y: 10
                    }
                },
                hide: {
                    fixed: true
                },
                style: 'ui-tooltip-shadow'
            });

Путь 2: 

    $('.ttTarget').live('mouseover', function (event) {
        //alert($(this).next('div.ttContent').text());
        //alert($(this).parent('div').find('div.ttContent').html());
        $(this).qtip({
            overwrite: false,
            content: $(this).parent('div').find('div.ttContent').html(),
            position: {
                my: 'top left',
                target: 'mouse',
                viewport: $(window),
                adjust: {
                    x: 10, y: 10
                }
            },
            hide: {
                fixed: true
            },
            show: {
                event: event.type,
                ready: true
            },
            style: 'ui-tooltip-shadow'
        }, event);
    });
...