Home/ Questions/Q 8900433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T01:05:54+00:00

I imagine this is simple and some sort of a scoping problem- yet I

  • 0

I imagine this is simple and some sort of a scoping problem- yet I am stuck. In the code below, I’d like to see an alert with either “foo!” or “bar!’ when I mouse over the div’s. Instead I see empty content. How do I address the current element that matched the selector from the spot where I have the alert()? TIA.

<!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" xml:lang="en" lang="en">
<head>
    <title>Test Case</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

    <!-- Tooltip classes -->
    <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />

    <!-- jQuery and the Poshy Tip plugin files -->
    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../src/jquery.poshytip.js"></script>

    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            $("span[name='entity']").poshytip({
                className: 'tip-yellow',
                content: function(updateCallback) {
                            var title = $(this).attr('title');
                            alert(title);
                            updateCallback(title);
                          },
                showTimeout: 1,
                alignTo: 'target',
                alignX: 'center',
                offsetY: 5,
                allowTipHover: true
            });
        });
        //              
        //]]>
    </script>   
</head>

<body>
    <p><span name="entity" title="foo!">Hover for a tooltip 1</span></p>
    <p><span name="entity" title="bar!">Hover for a tooltip 2</span></p>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your selection using $(this).attr('title') is correct. However, since poshytip uses the title attribute internally, it appears to be modifying the title attribute temporarily. You can see this behavior by setting a breakpoint there: $(this) references the span, but the title is blank.

    When you select the span outside of the content callback, the title is there — for example, from a debugger using $("span").attr("title")

    Since poshytip’s purpose is to give you enhanced tooltips, this is probably expected. In fact, if you remove your content function entirely, you will see that the correct title / tooltip pops up:

        $(function(){
        $("span[name='entity']").poshytip({
            className: 'tip-yellow',
            showTimeout: 1,
            alignTo: 'target',
            alignX: 'center',
            offsetY: 5,
            allowTipHover: true
        });
    });

    Specifying the content method is useful for calculating the title (e.g. if you wanted to return some other value, from content, the tooltip would display it).

    Also, the updateCallback is mainly used to update the tooltip asynchronously:
    http://vadikom.com/demos/poshytip/#async-content

    • 0