Anil Labs

Tuesday, August 4, 2009

Simple tooltip using javascript and css?

Posted by at
Labels: ,

13 comments:

  1. SharySeptember 1, 2009 at 8:43 AM

    This code is not working, Kindly can you tell me what is problem, I am using this code:





    ToolTip





    .mktipmsg {padding: 5px; background-color: #FFF8DC; border: 1px solid #DEB887; width:180px;font-family: Arial,

    Helvetica, sans-serif; font-size: 12px; color: #6b6b6b; display:none; position:absolute;left:0px;top:0px; }









    function showtip(e,message){var x=0;var y=0;var m;var h;if(!e)
    var e=window.event;if(e.pageX||e.pageY){x=e.pageX;y=e.pageY;}
    else

    if(e.clientX||e.clientY){x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.s

    crollTop+document.documentElement.scrollTop;}
    m=document.getElementById(’mktipmsg’);if((y>10)&&(y510)
    {m.style.top=y-messageHeigth+”px”;}
    if(x<850){m.style.left=x+20+”px”;}
    else{m.style.left=x-170+”px”;}
    m.innerHTML=message;m.style.display=”block”;m.style.zIndex=203;}
    function hidetip(){var m;m=document.getElementById(’mktipmsg’);m.style.display=”none”;}










    Hover your mouse here to see simple tooltip text.











    Please help me in correcting this Script

    ReplyDelete
  2. Anil Kumar PanigrahiSeptember 1, 2009 at 9:27 AM

    Try to write the javascript code line by line then we know that condition from where to where, there is problem of missing closing brackets in your script.

    ReplyDelete
  3. sharySeptember 4, 2009 at 8:12 AM

    Tooltip





    /* This tooltip library was created by Anil Kumar */

    function showtip(e,message)

    {
    var x=0;

    var y=0;

    var m;

    var h;

    if(!e)
    {
    var e=window.event;
    }

    if(e.pageX || e.pageY) { x=e.pageX; y=e.pageY; }

    else if(e.clientX || e.clientY)
    {
    x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
    y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
    }
    m=document.getElementById('mktipmsg');

    if ((y>10)&&(y510)
    {
    m.style.top=y-messageHeigth+"px";
    }
    if(x<850)
    {
    m.style.left=x+20+"px";
    }

    else
    {
    m.style.left=x-170+"px";
    }

    m.innerHTML=message;
    m.style.display="block";
    m.style.zIndex=203;

    }

    function hidetip(){

    var m;

    m=document.getElementById('mktipmsg');
    m.style.display="none";

    }







    #mktipmsg
    {
    padding: 5px;
    background-color: #FFF8DC;
    border: 1px solid #DEB887;
    width:180px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #6b6b6b;

    position:absolute;
    left:0px;
    top:0px;
    }


























    Hover your mouse here to see simple tooltip text.

















    Please help me, This Script is not working, i use your Script that you posted above, and i am using Mozilla FireFox 3.5....
    Waiting for your reply.
    Thanks

    ReplyDelete
  4. sharySeptember 4, 2009 at 8:14 AM

    Tooltip





    /* This tooltip library was created by Anil Kumar */

    function showtip(e,message)

    {
    var x=0;

    var y=0;

    var m;

    var h;

    if(!e)
    {
    var e=window.event;
    }

    if(e.pageX || e.pageY) { x=e.pageX; y=e.pageY; }

    else if(e.clientX || e.clientY)
    {
    x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
    y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
    }
    m=document.getElementById('mktipmsg');

    if ((y>10)&&(y510)
    {
    m.style.top=y-messageHeigth+"px";
    }
    if(x<850)
    {
    m.style.left=x+20+"px";
    }

    else
    {
    m.style.left=x-170+"px";
    }

    m.innerHTML=message;
    m.style.display="block";
    m.style.zIndex=203;

    }

    function hidetip(){

    var m;

    m=document.getElementById('mktipmsg');
    m.style.display="none";

    }







    #mktipmsg
    {
    padding: 5px;
    background-color: #FFF8DC;
    border: 1px solid #DEB887;
    width:180px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #6b6b6b;

    position:absolute;
    left:0px;
    top:0px;
    }


























    Hover your mouse here to see simple tooltip text.

















    Please help me, This Script is not working, i use your Script that you posted above, and i am using Mozilla FireFox 3.5....
    Waiting for your reply.....
    Thanks

    ReplyDelete
  5. Anil Kumar PanigrahiSeptember 4, 2009 at 11:05 PM

    Write the below code

    messageHeigth=-10;
    if((y>10)&&(y<510))
    {
    m.style.top=y-messageHeigth+"px";
    }
    then we can get the tooltip text, i am also using firefox 3.5 only, it is working fine now.

    see the live demo @ http://labs.anil2u.info/tooltip.php

    ReplyDelete
  6. SharySeptember 5, 2009 at 2:10 AM

    Thanks,Anil, it working fine now.

    ReplyDelete
  7. SharySeptember 6, 2009 at 7:21 AM

    Hi, Anil,

    Can you tell me how i can made this Tooltip moving with the Movement of Mouse,
    Please guide me in this work, Waiting for your response.
    Thanks

    ReplyDelete
  8. Anil Kumar PanigrahiSeptember 7, 2009 at 7:42 PM

    Hi Shary,

    I am also not tried with that requirement.

    ReplyDelete
  9. sharySeptember 8, 2009 at 7:55 AM

    Hi, i Just got the solution,

    The Solution is, Go to HTML part and change this line

    onmouseover="showtip(event,'message');"

    with below line


    onmousemove="showtip(event,'message');"

    You will get sliding Tooltip with the movement of your Mouse.

    Thanks

    ReplyDelete
  10. Anil Kumar PanigrahiSeptember 8, 2009 at 10:44 PM

    Hi shary,

    thanks you very much for your solution,

    ReplyDelete
  11. PrathapDecember 21, 2009 at 5:48 AM

    Hello ANil,

    Whenever a text box gets a focus , a tooltip will be displayed at the RHS of the text box . I would like to know how to achieve that

    Please help me

    ReplyDelete
  12. Anil Kumar PanigrahiDecember 21, 2009 at 10:32 PM

    Hello Pratap,

    If adjust the x and y positions then above code will works fine. Or once check the URL : http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx

    ReplyDelete
  13. gopiMarch 23, 2010 at 4:24 AM

    Hi,

    It's very nice post yaar.......... thank you so much.......... it's working really fantastic.. I implemented in my application.....

    ReplyDelete

Subscribe to: Post Comments (Atom)