Javascript Tooltip / Posts /

AJAX Tooltip position

3

This code tooltip.pop(this,'#my_tip',{position:2}) works well that the tooltip appears below the element.

However, tooltip.ajax(this,'url.....',{position:2}) does not pop the tooltip at the bottom, the tooltip always appears on the right of the element.

Does Ajax tooltip allow positioning?

Wilson  11 years ago   viewed: 5895    

5 Answers

-1
Ajax tooltip allows positioning.
1. Please check if you are using the latest version of our tooltip.js. It should be v2013.7.8 now.
2. Please stage a testing page online so that I can take a look ans see where is wrong.

Thanks.
Milo   11 years ago
-2

I've just downloaded v2013.7.8, overriden the old tooltip.js and tooltip.css.

2 questions:

The Ajax tooltip positioning stil doesn't work.  Old version always shows the ajax tooltip at the right of the element, new version always shows ajax tooltip at the bottom.  The "position" attribute does not change the position.  I will try to show you the code.

Old version background color is grey with black font.  New version background color becomes black with white font which mess up the appearence of my tooltip contents.  How to change the background and font color?

 

Wilson
  11 years ago
1

Sorry I don't have a testing server open to the external.

I tried to simplify the code like the following TEST.HTML, but still the problem exists.  Tooltip.ajax "position" value does not change the tooltip position at all, the tooltip always pops out at the bottom of the element.  Tooltip.pop works fine with the "position" attribute however.  I am using IE 10 and Chrome.

TEST.HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Stock Quote</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="tooltip.js" type="text/javascript"></script>
    <link href="tooltip.css" rel="stylesheet" type="text/css" />
 </head>

 <body topmargin="0" leftmargin="0" bgcolor="#ffffff">
  <form name="form1" id="form1" ACTION="StockQuote.asp" METHOD="POST">
   <table width="500" border="1" cellpadding="0" cellspacing="1" align="center">
        <div style="display:none;">
            <div id="delivery_tip1">
             Hello World!
            </div>
        </div>
              
        <tr>
         <td valign="top">
          <b onMouseOver="tooltip.ajax(this,'test01.html',{position:3})">AJAX</b>
         </td>
         <td valign="top">
          <b onMouseOver="tooltip.pop(this,'#delivery_tip1',{position:3})">POP</b>
         </td>           
        </tr>
   </table>
  </form>
 </body>
</html>

 

TEST01.HTML called by the AJAX

<!DOCTYPE html>
<html>
 <head>
  <title>TEST</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>

 <body topmargin="0" leftmargin="0" bgcolor="#ffffff">
   <table width="500" border="1" cellpadding="0" cellspacing="1" align="center">
    <tr>
     <td valign="top">
      HELLO WORLD FROM AJAX !
     </td>
    <tr>
   </table>
 </body>
</html>

 

Wilson
  11 years ago
-2
Wilson,
The tooltip.js has taken your options object as ajaxSettings object. That is why your position setting is ignored. In your Ajax script, please add null before your option object (after your update, it should look like: <b onMouseOver="tooltip.ajax(this,'test01.html',null, {position:2})">AJAX</b>

This is not your fault. This is a defect of the tooltip.js. We'll make it smart in next release to detect that the options is not ajaxSettings when the later is missing. 

As to the styles, you can pick up the tooltip.css from themes/1/ folder if you prefer the grey colour style.
Milo   11 years ago
0
Milo, it works OK, thank you.
Wilson
  11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲