[RESOLVED] how to create tooltip on mouse over

[Guvera]

Hi,

How to create a tooltip on mouse over in asp.net or javascript?
I have a button control search. while i mouse over in the button it shows please search message in tooltip. Is it possible?

Thanks

[danasegarane]

Add a tool tip using the tool tip property

<asp:Button  runat="server" Text="Submit" ID="ButtonSubmit" ToolTip="Search"  />

Or place fancy tool tip using div tags as shown here

[gep13]

Or, if you want a really "flashy" version, and have a couple dollars, you could use this one:

http://www.aspnettooltip.com/

Gary

[avrail]

hay,

Button1.ToolTip = "search";

[motil]

Hi
well in case you're using jQuery I Also needed tooltip few days ago, i searched some already made tooltip and i indeed found some neat ones but the problem was they all weight to big for tool tips 70-80kb js file

http://www.webdesignbooth.com/15-jqu...endly-tooltip/


if you like me want a not to fancy tooltip but still looks good here is the plug-in I made for jQuery few days ago and the code weight less then 1kb.

CSS: (you can modify it as you wish)

.CPToolTip{position:relative;-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #919292;display:none;background:#fff;direction:rtl;padding:3px 3px 3px 3px;font-size:11px;z-index:2701}

js

$.fn.CPToolTip = function (options) {
    var defaults = {
        width: 150,
        textAlign: 'center',
        topOffset: 0,
        leftOffset: 0
    }

    var options = $.extend(defaults, options);
    var me = $(this);
    var elements = $('[title]', this);
    if (elements.length == 0) elements = $(this)
    $(elements, me).each(function () {

        var saveAttr = $(this).attr('title')
        $(this).unbind('mouseenter mouseleave')
        $(this).hover(function () {
            var offset = $(this).offset();
            var left = (offset.left + ($(this).width() / 2)) - ((options.width / 2) + options.leftOffset);
            var text = $(this).attr('title')
            var arrowLeft = (options.width / 2) - 9;
            $('<div  class="CPToolTip" style="width:' + options.width + 'px;position:absolute;left:' + left + 'px;top:' + top + 'px;text-align:' + options.textAlign + ';line-height:' + options.height + 'px">' + text + '<img class="CPToolTipArrow" src="/Graphics/tooltiparrow.png" style="left:' + arrowLeft + 'px"></div>').appendTo('body')
            .fadeTo(0, 0.9, function () {
                if (jQuery.browser.msie) {
                    $('.CPToolTip').get(0).style.removeAttribute('filter');
                }
            })

            $('.CPToolTip').css({ 'top': (offset.top - ($('.CPToolTip').height()) - 17) - options.topOffset + 'px' });
            $(this).attr('title', '');

        }, function () {
            $('.CPToolTip').attr('title', saveAttr).remove();
            $(this).attr('title', saveAttr);

        });
    });
}

just set the title attributes to the elements you wish to have tooltip and on page load:

 $('body').CPToolTip({ width: 60, topOffset: 5, leftOffset: 0 });
// or
 $('#MyContainer').CPToolTip({ width: 60, topOffset: 5, leftOffset: 0 });
// or 
 $('.MyClass').CPToolTip({ width: 60, topOffset: 5, leftOffset: 0 });

// or any other jQuery selector.

my tool tip use CSS3 rounded corners property so it's look better in supported browsers.


i attached the img needed for my tooltip plugin

[Guvera]

hi

Thanks. I got it :-)