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>

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>

• javascript
• text
• tooltip
• mouseover

• I would advise you to use a plugin instead of trying to do it yourself especially if you're a newbie. There are some pretty good ones listed below. Also, if you have dreamweaver they have a widget called spry tooltip that is super easy to use – Linens Commented Mar 17, 2011 at 4:59
• @Luke: Do you have any suggestions on any jquery plugin that you have seen work well? – Piyush Mattoo Commented Mar 17, 2011 at 5:21

3 Answers 3

change from

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

to

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

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./projects/qtip/a

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

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.