CODEWITHSUNDEEP
javascripttexttooltipmouseover
Gabriel
Gabriel

Reputation: 103

Text tooltip on mouseover

I have a set of bullets, and I'd like to create a tooltip when I mouse over each of them individually. The tooltip text can be the bullets title tag, and it needs to be outputted into a tooltip container. Newbie to javascript so this is where I need the help.

Here's my CSS:

.container ul { width: 300px; height: 30px; display: block; background: #CCC;  }
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; }
.tooltip { width: auto: height: 12px; display: block; }

My HTML:

<div id="tooltip" class="tooltip"></div>
<div class="container">
    <ul>
        <li class="book" title="book"></li>
        <li class="movie" title="movie"></li>
        <li class="tv" title="tv"></li>
    </ul>
</div>

And my javascript:

<script>
$(document).ready(function(){
    $("ul li").mouseover(function() {
         $("#tooltip").text($(this).attr("title"));
    });
});
</script>

Upvotes: 1

Views: 22550

Answers (3)

V&#225;clav
V&#225;clav

Reputation: 527

I would suggest jQuery UI feature tooltip.

Tooltip text is often taken from title attribute of element on which you use this feature - but you may get it elsewhere.

You may set position of tooltip and also position of text inside.

$('textarea').tooltip({
        position: {
            my: 'left center',
            at: 'right center'
        }
    });

But you may get text for tooltip anywhere in code.

$('select').tooltip({
position: {
        my: 'right center',
        at: 'left center'
    },
    content: function(){
        if($(this).find('option:selected').val() == 0 )
        {
            return '...';
        }
        else
        {
            return '...' + $(this).find('option:selected').val() + '...';
        }
    }
});

like in this case where tooltip contains text based on selected option - or any else text.

Upvotes: 0

Davuth
Davuth

Reputation: 585

change from

$("#tooltip").text("this.val(alt)")

to

$("#tooltip").text($(this).attr('alt'));

Upvotes: 1

Chris Cherry
Chris Cherry

Reputation: 28554

This doesn't directly answer your question, but there are some handy jQuery plugins that already exist for this functionality. I like this one: http://craigsworks.com/projects/qtip/a

Some others: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Upvotes: 0

Related Questions