Question

i have many controls like below :

                <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>

as you see i put the ttContent of each control in the below of it (inside a div) and i have many controls with ttTarget class...

the qtip2 codes for mouse tracker tooltips is like below :

        $( #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 
        });

when we use id s for qtip every thing is so simple and we can find target s content easily!
but in my scenario i have many id s that i do n t know how can i recognize their content by the upper code !

i mean :

        $( .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 
        });

thanks in advance

Answer 1

Way 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 
            });

way 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);
    });

友情链接