tooltip ajax...following your mouse

[exoskeleton]

hi guys..hope you can help me...my boss want me to edit our website and apply the tooltip thing, i mean the moving tooltip that follows the mouse..

please help...thank you... :(

[Teenzonez]

Hi

Go to the link and extract what all you want:

http://www.hotscripts.com/Detailed/60399.html

In this page you will see a link called script, which is an example of ajax tooltip.

Regards
TeenzoneZ

[acoder]

Why do you need to use Ajax for tooltips? Are you gathering data from the server?

[exoskeleton]

Why do you need to use Ajax for tooltips? Are you gathering data from the server?

sir acoder, no im not! i know you already viewed site which tooltip is ajax and i dont know how to do that. Its a requirement in our project here in the company. we offer groupware and we want to enhance and make it more user-friendly and presentable...

im just trying to ask to our dear experts here like you... :)

[acoder]

Try something like overlib.

[exoskeleton]

hi guys..please help... i have download ajax tooltip ... the tooltip always position under the word it is is being attached. even if the word is at the bottom of the screen it is still display at the bottom...i can see it. i found site that if the word is found at the bottom ... the tooltip appears above to make it visible to viewers.

scripts here attached:

/* Custom variables */
 
/* Offset position of tooltip */
/* var x_offset_tooltip = 5; */
var x_offset_tooltip = 5;
var y_offset_tooltip = 0;
 
/* Don't change anything below here */
 
 
var ajax_tooltipObj = false;
var ajax_tooltipObj_iframe = false;
 
var ajax_tooltip_MSIE = false;
if(navigator.userAgent.indexOf('MSIE')>=0)ajax_tooltip_MSIE=true;
 
 
function ajax_showTooltip(externalFile,inputObj)
{
    if(!ajax_tooltipObj)    /* Tooltip div not created yet ? */
    {
        ajax_tooltipObj = document.createElement('DIV');
        ajax_tooltipObj.style.position = 'absolute';
        ajax_tooltipObj.id = 'ajax_tooltipObj';        
        document.body.appendChild(ajax_tooltipObj);
 
 
        var leftDiv = document.createElement('DIV');    /* Create arrow div */
        leftDiv.className='ajax_tooltip_arrow';
        leftDiv.id = 'ajax_tooltip_arrow';
        ajax_tooltipObj.appendChild(leftDiv);
 
        var contentDiv = document.createElement('DIV'); /* Create tooltip content div */
        contentDiv.className = 'ajax_tooltip_content';
        ajax_tooltipObj.appendChild(contentDiv);
        contentDiv.id = 'ajax_tooltip_content';
 
        if(ajax_tooltip_MSIE){    /* Create iframe object for MSIE in order to make the tooltip cover select boxes */
            ajax_tooltipObj_iframe = document.createElement('<IFRAME frameborder="0">');
            ajax_tooltipObj_iframe.style.position = 'absolute';
            ajax_tooltipObj_iframe.border='0';
            ajax_tooltipObj_iframe.frameborder=0;
            ajax_tooltipObj_iframe.style.backgroundColor='#FFF';
            ajax_tooltipObj_iframe.src = 'about:blank';
            contentDiv.appendChild(ajax_tooltipObj_iframe);
            ajax_tooltipObj_iframe.style.left = '0px';
            ajax_tooltipObj_iframe.style.top = '0px';
        }
 
 
    }
    // Find position of tooltip
    ajax_tooltipObj.style.display='block';
    ajax_loadContent('ajax_tooltip_content',externalFile);
    if(ajax_tooltip_MSIE){
        ajax_tooltipObj_iframe.style.width = ajax_tooltipObj.clientWidth + 'px';
        ajax_tooltipObj_iframe.style.height = ajax_tooltipObj.clientHeight + 'px';
    }
 
    ajax_positionTooltip(inputObj);
}
 
function ajax_positionTooltip(inputObj)
{
    var leftPos = (ajaxTooltip_getLeftPos(inputObj) + inputObj.offsetWidth);
    var topPos = ajaxTooltip_getTopPos(inputObj);
 
    // exo test
    var rightedge=ajax_tooltip_MSIE? document.body.clientWidth-leftPos : window.innerWidth-leftPos
    var bottomedge=ajax_tooltip_MSIE? document.body.clientHeight-topPos : window.innerHeight-topPos
 
    var tooltipWidth = document.getElementById('ajax_tooltip_content').offsetWidth +  document.getElementById('ajax_tooltip_arrow').offsetWidth; 
 
    // exo test
    //Dropping this reposition for now because of flickering
    var offset = tooltipWidth - rightedge; 
    if(offset>0)leftPos = Math.max(0,leftPos - offset - 5);
 
    ajax_tooltipObj.style.left = leftPos + 'px';
    ajax_tooltipObj.style.top = topPos + 'px';
 
}
 
 
function ajax_hideTooltip()
{
    ajax_tooltipObj.style.display='none';
}
 
function ajaxTooltip_getTopPos(inputObj)
{        
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
      if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
  }
  return returnValue;
}
 
function ajaxTooltip_getLeftPos(inputObj)
{
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null){
      if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
  }
  return returnValue;
}

can you please point out where and how should i edit this to automatically sense that the word is at the bottom and display the tooltip above and vice versa..like if the word is at the rightmost part then it should display on the leftside to make it visible.

TIA please help me

[acoder]

See this link for the screen properties. Also see this page for finding the position of elements.

[exoskeleton]

im sorry dear mod, i cant figure it out. :( i dont understand. hope someone might help me to edit the javascript attached above.