Sticky Tooltip Script Issue (Shows all Tool Tips)

**Gymratz** · 02-17-2010, 09:14 PM

1) Script Title: Sticky Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ckytooltip.htm

3) Describe problem:
Every Tool Tip shows ALL tool tips.

Head Code:

Code:

<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://testhelpdesk.ashlandpartners.com/stickytooltip.js">

        /***********************************************
        * Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
        * This notice MUST stay intact for legal use
        * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
        ***********************************************/

    </script>

    <link rel="stylesheet" type="text/css" href="http://testhelpdesk.ashlandpartners.com/stickytooltip.css" />
    <title>Touch Points</title>
    <style type="text/css">

        .style6
        {
            text-align: left;
        }
        .style9
        {
            font-size: x-large;
        }
        .style11
        {
            text-align: right;
        }
        </style>
    </head>

Tooltip Code:

Code:

<div id="mystickytooltip" class="stickytooltip">
            <div style="padding:5px">
                <div id="sticky1">
                    <font face=verdana size=1 color=darkblue><b>Test:</b> Test</font>
                </div>
                <div id="sticky2">
                    Sticky Tooptip 2 content here...
                </div>
                <div id="sticky3">
                    Sticky Tooptip 3 content here...
                </div>
            </div>
                <div class="stickystatus"></div>
        </div>

Where I use:

Code:

<asp:RadioButtonList ID="rbl_test" runat="server" ForeColor="#000000" RepeatDirection="Horizontal" data-tooltip="sticky3"
                                                                                RepeatLayout="Flow">
                                                                                <asp:ListItem>Once/Year</asp:ListItem>
                                                                                <asp:ListItem>Twice/Year</asp:ListItem>
                                                                                <asp:ListItem>When in Area</asp:ListItem>
                                                                            </asp:RadioButtonList>

Result is an awesome looking tool tip that shows all 3 of my Sticky's (1/2/3).

**Gymratz** · 02-17-2010, 11:22 PM

What I missed was:
class="atip"

This wasn't shown in the page examples, and I could only find it when I went to 'Developer View.'
Adding this in fixed the issue.

Next question:
Can I modify the contents of the DIV using vb.net?
For example, if I want to have dynamic tooltips that I fill in from MS SQL - is that easy enough to do?
Currently I've been using the textbox.tooltip to put in dynamic information; however, the build int tooltip is horrible compared to this!

**ddadmin** · 02-18-2010, 07:53 AM

In general, the checklist for using any server side language to dynamically output client side JavaScripts is the same. As long as what gets output to the browser looks identical to as if you've manually included the script (ieL Sticky Tooltip script) on your page, it should work. In this case, the only code that needs to be dynamically generated is the code of Step 2, or the markup portion of the tooltips, ie:

Code:

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>

<div id="sticky2" class="atip"  style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>

<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div>

</div>

<div class="stickystatus"></div>
</div>

The code references portion of the script (code of Step 1) is static, and doesn't need to be dynamically generated.

While trying to get the output to work, use the browser's view source feature often to check that the code that's being output comes closer and closer to how it should look.

**paul3141** · 03-15-2010, 10:26 PM

Like Gymratz I can't find the css for class ="atip". I've poked around on Firefox developer to no avail.

It's not in the stickytooltip.css file ......

Thanks, Paul

Thread: Sticky Tooltip Script Issue (Shows all Tool Tips)

Thread Tools

Search Thread

Sticky Tooltip Script Issue (Shows all Tool Tips)

Bookmarks

Bookmarks

Posting Permissions