Thursday, 25 August 2011

Javascript Callout tip on mouse position





<html>
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">  
.callout
{
      position: relative;
      margin: 18px 0;
      padding: 18px 20px;
      background-color: #eef4f9;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      zoom: 1;
}
.callout .notch
{
      position: absolute;
      top: -10px;
      left: 20px;
      margin: 0;
      border-bottom: 10px solid #eef4f9;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 0;
      padding: 0;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
      _border-right-color: pink;
      _border-left-color: pink;
      _filter: chroma(color=pink);
}
.border-callout
{
      border: 1px solid #c5d9e8;
      padding: 10px 10px;
}
.border-callout .border-notch
{
      border-bottom-color: #c5d9e8;
      top: -11px;
}
</style>
<script>
function ShowCallout(calloutText, evt)
{
    var divCallout = document.getElementById('divCallout');
   
    evt = evt || window.event;                      
    document.getElementById("divCalloutText").innerHTML = calloutText;                  
                
    SetCalloutPosition(evt, divCallout, 0, 0);               
   
    divCallout.style.display = "block";
}

function HideCallout()
{
    divCallout.style.display = "none";
}

function SetCalloutPosition(sEvent, divCallOut, marginLeft, marginTop)
{  
    if(divCallOut)
    {                                               
        // Get x and y coordinates to show callout at mouse position   
        var xPos = 0; var yPos = 0;
        if (sEvent.pageX || sEvent.pageY)
        {
            xPos = sEvent.pageX;
            yPos = sEvent.pageY;
        }
        else if (sEvent.clientX || sEvent.clientY)
        {
            xPos = sEvent.clientX + document.documentElement.scrollLeft + 10;
            yPos = sEvent.clientY + document.documentElement.scrollTop;
        }
           
        divCallOut.style.left = xPos + marginLeft + "px";
        divCallOut.style.top = yPos - marginTop + "px";    
    }                   
}
</script>
</head>
<body>
    <form id="form1">
    <div>
    <div style="width:200px; border:1px solid silver;text-align:center;" onmouseover="javascript:ShowCallout('this is the callout text', event);" onmouseout="javascript:HideCallout();">
          <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr style="height:30px;">
                  <td align="center" style="background-color:Maroon;color:White">
                      Move your mouse here
                  </td>
              </tr>
          </table>
      </div>
     
    <div id="divCallout" style="z-index:1200;position:absolute;width:200px;display:none" class="callout border-callout">
        <div id="divCalloutText">Callout text</div>
        <b class="border-notch notch"></b>
        <b class="notch"></b>
    </div>
    </div>
    </form>
</body>
</html>

2 comments:

  1. THANKS A LOT.. I AM A NON DEVELOPER.. IT CREATED LOT OF INTEREST TO ME. I DID MANY EXPERIENTS WITH IT.

    ReplyDelete