1

I have the following markup that I am applying the succedding Javascript to in order to produce a tooltip, the problem is I am trying to set the contents of the tooltip to the contents of the span.

I cannot figure out a way of doing this without 500 different document.get etc...

Basically I want to know: In the showTooltip function, how can I get the contents of the span dynamically?

Markup:

<ul class="exec-List">
                    <li>
                        <img src="file:///C|/Users/tsujp/Documents/Everything/Adobe Projects/DW/KCC/Website/V8/src/committee/mirae.png" /> 

                        <span class="tooltip-span">Conten2t</span>

                    </li>
                    <li>
                        <img src="file:///C|/Users/tsujp/Documents/Everything/Adobe Projects/DW/KCC/Website/V8/src/committee/mirae.png" /> 

                        <span class="tooltip-span">Content55</span>

                    </li>
                </ul>

Javascript:

$(document).ready(function() {

var changeTooltipPosition = function(event)
{
  var tooltipX = event.pageX - 8;
  var tooltipY = event.pageY + 8;
  $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

function showTooltip(event/*, index, el*/)
{
    /*alert( $(this).parent(this).get(0).tagName );*/

    $('div.tooltip').remove();
    $('<div class="tooltip">/* + tooltip_text +*/ </div>')
        .appendTo('body');
    changeTooltipPosition(event);
};

var hideTooltip = function()
{
   $('div.tooltip').remove();
};

$('span').each(function()
{
    if( $(this).hasClass( 'tooltip-span' ) )
    {                       
        //tooltip_text = $(el).html();

        $(this).parent(this).bind(
        {           
            mousemove : changeTooltipPosition,
            mouseenter : showTooltip/*( HOW DO I PASS 'EVENT' HERE)*/,
            mouseleave: hideTooltip
        });
    }
});

});

1
  • 1
    $(this).html() I guess...
    – marekful
    Feb 5, 2013 at 17:14

1 Answer 1

1

You can select on $('.tooltip-span', this) and take the text()

function showTooltip(event/*, index, el*/)
{
    var text = $('.tooltip-span', this).text();
    /*alert( $(this).parent(this).get(0).tagName );*/

    $('div.tooltip').remove();
    $('<div class="tooltip">' + text + '</div>')
        .appendTo('body');
    changeTooltipPosition(event);
};

JSFiddle

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.