Results 1 to 3 of 3

Thread: "Advanced" Tooltip in XTemplate

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    40

    Default "Advanced" Tooltip in XTemplate

    Hello,
    I want to display an "advanced" Tooltip - as shown in the examples - in a DataGrid/DataView. Unfortunately I don't know how to manage that...

    Using the qtip Attribute works, but I want to do more in my tooltip than just show data... show an anchor, select the position of the tip, trigger Actions and so on.
    Removing the qtip attribute and replacing in with the commented code does - exactly - nothing.

    So my question is: how can I show a rich-content-tooltip with anchor:bottom within a template?

    Thanks in advance for any advice!
    Regards, Alina

    Code:
    var qtiptpl = new Ext.XTemplate(
          '<tpl for=".">'
          ,'<div><i>{label}:</i> {content}</div>'
          ,'</tpl>'
        );
    
        var tip = qtiptpl.apply([{label:"ID",content:values.id},{label:"MediaType",content:values.mediaType},{label:"FileExtension",content:values.fileExtension}]);
    
    
        if (!Ext.isEmpty(miscButtonInfo)){
          var id = "misc_" + values.id;
          // miscButton some html inserted into the template
          miscButton = '<span class="infocircle" id="' + id + '" style="background-color:silver" qtitle="my title" qtip="' + tip + '" hide="false">' +
              '<img src="misc.png" alt="misc" />' +
              '</span>';
          
          //new Ext.ToolTip({
          //    target: Ext.select("#" + id),
          //    html: 'A very simple tooltip'
          //});
        }

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You shouldn't be using QuickTips for this.

    You should create a single Tooltip instance with a target set to the tpl render location and delegate:'div' (maybe add an extra class to the div in your tpl to make this selector more specific?).

    Next, you probably want to write a 'beforeshow' listener for the tooltip to update the tip content based on the current element.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    40

    Default

    Thank you Condor, you made my day!
    Simple but... you have to know it...

    Thx Alina

Similar Threads

  1. Show legends in "Advanced Charts" example
    By borisperezg in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 27 Aug 2010, 8:54 AM
  2. Adding event to "Advanced Application"
    By Asken in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 20 Aug 2010, 2:13 AM
  3. Advanced Tab Panel example not rendering "header" when all tabs are closed
    By techtigre in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 26 Jul 2010, 10:47 AM
  4. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  5. [2.1][DUP] Bug in Sample "Advanced Tabs"
    By iRaS in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 9 Jul 2008, 12:38 PM

Posting Permissions

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