Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Extending the QuickTips...

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    298

    Default Extending the QuickTips...

    Hi.

    I haven't found a way to extend the functionality of the QuickTips. I want to use it for dynamic tooltips in grid but those tooltips have to be generated by request (via AJAX call). For that it would be a nice feature if you can pass a function to the "ext:qtip" attribute so that this function is called when the tooltip is rendered.

    At the moment I'm thinking about how to pass a function using the renderer function:

    PHP Code:
    function render (valueprecord) {
      
    p.attr 'ext:qtip="return dynamic()"';
      return 
    value;
      } 
    Perhaps the keyword "return" can decide wether the tooltip lib should use it as a string or a function call...

    Any ideas? Wouldn't it be a nice feature for 1.1?


    JOERN

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    That would probably be a bad idea from a usability standpoint. In a lot of cases by the time the user mouse's over something and an ajax request is made and the result processed, the user will have moved on. A better idea would probably be to load the tip text dynamically into an array during initialization and use register to add them to elements, or provide your lookup functionality at the time you build the control so you can pass the tip in the config.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    298

    Default

    Quote Originally Posted by tryanDLS View Post
    That would probably be a bad idea from a usability standpoint. In a lot of cases by the time the user mouse's over something and an ajax request is made and the result processed, the user will have moved on. A better idea would probably be to load the tip text dynamically into an array during initialization and use register to add them to elements, or provide your lookup functionality at the time you build the control so you can pass the tip in the config.
    No. As AJAX is asynchron there won't be a huge problem when the user has left the field. Secondly, you can increase the delay value to avoid too many calls.

    Let me explain you two scenarios where you will need this:

    1. Using tooltips to deliver information for a form field. In one of my applications those descriptions are up to 5 lines and there are up to 100 tooltips on one side. This means heavy loading time using a modem or isdn.

    2. In my table (about 20 columns and 30 rows) some cell tooltips should be delivered from another database table row (via AJAX call). The tooltip will display up to 10 lines including a comment field. When using a static approach this will slow down the entire application.

    JOERN

  4. #4

    Default

    Quote Originally Posted by jheid View Post
    No. As AJAX is asynchron there won't be a huge problem when the user has left the field. Secondly, you can increase the delay value to avoid too many calls.

    Let me explain you two scenarios where you will need this:

    1. Using tooltips to deliver information for a form field. In one of my applications those descriptions are up to 5 lines and there are up to 100 tooltips on one side. This means heavy loading time using a modem or isdn.

    2. In my table (about 20 columns and 30 rows) some cell tooltips should be delivered from another database table row (via AJAX call). The tooltip will display up to 10 lines including a comment field. When using a static approach this will slow down the entire application.

    JOERN
    Hey jheid, I agree with tryanDLS on this one. Don't forget that browsers have maximum simultaneous connections per host (IE only allows 2 connections at a time to a host), meaning that even if you fire async requests for each field/row on a delay, you may end up with bottlenecks if a user tries to access too many rows in succession (I've experienced this with TVGuide.com's listings which uses your proposed delay/request model).

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    298

    Default

    If somebody is interested: As the QuickTips aren't really extensible I added the line

    PHP Code:

    <script type="text/javascript" src="QuickTips.js"/> 
    and changed the lines

    PHP Code:

            el
    .dom.style.width  tm.maxWidth+'px';
            
    //tipBody.dom.style.width = '';
            
    tipBodyText.update(o.text); 
    to

    PHP Code:

            el
    .dom.style.width  tm.maxWidth+'px';
            
    //tipBody.dom.style.width = '';
            
    var ttText o.text;
            if (
    ttText.indexOf ('return ') == 0)
               
    ttText = eval (ttText.substring ('return '.lengthttText.length));
            
    tipBodyText.update(ttText); 
    so you can write your own method to deliver the tooltext text:

    PHP Code:
     <div ext:qtip="return getMyTooltip(4711)"

  6. #6

    Default

    jheid, placing any javascript within an HTML or XHTML attribute is begging for problems. Javascript can contain a slew of characters that are not valid in HTML and XHTML documents and can cause problems with the browser rendering and doctype validation of the page.

    I would really suggest finding a better way of mapping your tooltips, inline javascript is rarely a good idea.

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    298

    Default

    Quote Originally Posted by haibijon View Post
    Hey jheid, I agree with tryanDLS on this one. Don't forget that browsers have maximum simultaneous connections per host (IE only allows 2 connections at a time to a host), meaning that even if you fire async requests for each field/row on a delay, you may end up with bottlenecks if a user tries to access too many rows in succession (I've experienced this with TVGuide.com's listings which uses your proposed delay/request model).
    It just depends on the scenario. Perhaps the thing I'm thinking about wouldn't be called "QuickTips" but "InfoTips" or a popup window. The thing is that I think it might be a nice feature if those QuickTips can be a little bit extensible so that you can do other "slower" things with it... If nobody needs this, okay.

  8. #8
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    298

    Default

    Quote Originally Posted by haibijon View Post
    jheid, placing any javascript within an HTML or XHTML attribute is begging for problems. Javascript can contain a slew of characters that are not valid in HTML and XHTML documents and can cause problems with the browser rendering and doctype validation of the page.

    I would really suggest finding a better way of mapping your tooltips, inline javascript is rarely a good idea.
    Yes, I agree. It's just a quick and dirty solution as I actually wanted to make a feature request.

  9. #9

    Default Extending QuickTips: Need dynamic (ajax) content

    I also am trying to extend the quicktips and am having trouble. I was trying to write a new class that extends it, but I'm in over my head. The idea was to override show or afterShow and have it update the tipBodyText

  10. #10

    Post

    Actually, the thing you want to do would be better (from a software design perspective)
    done like this:

    HTML Code:
    var qtipsMap = {
    test: "This is some qtip text",
    test2: "This is some other text"
    }
    
    Ext.extend(Ext.QuickTips, 
    {getToolTipTextByid:  function(id){
    //use an array/ajax request/whatever you like that returns the actual text
    return qtipsMap[id] || 'Undefined qtip id' + id;
    } });
    Then override your Qtips implementation so that instead of settings th text directly, it
    calls this.getToolTipTextById()

    When constructing a qtip, you should then pass qtip:test
    instead of the text, a secondary advantage of doing it this way, is Internationalization of your tips....

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •