Results 1 to 5 of 5

Thread: Tooltip on draw canvas sprites?

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: Tooltip on draw canvas sprites?

    I am trying to create a timeline with various sprite icons that show a tooltip when hovering. The timeline is in one panel of a viewport using the border layout.

    This is how I am adding the sprites to the surface, for each item in the store:

    Code:
    ...
    var sprite = Ext.create("Ext.draw.Sprite",{
                    type: "image",
                    id: "whatsit_" + record.get("id"),
                    src: src,
                    width: 20,
                    height: 20,
                    x: x+10,
                    y: 90 - (yearIcons[yearIndex]*20),
                    group: 'markers',
                    listeners:
                        {
                        click : function()
                            {
                            alert("Y " + year + ": " + desc);
                            },
                        mouseover: function()
                            {
                            console.log("just to prove mouseover is working");
                            }
                        
                        }
                    
                    });
    
    surface.add([sprite]);
    ...
    then I create a tooltip, like this:

    Code:
    var tip = Ext.create('Ext.tip.ToolTip', {
                        target: "whatsit_" + record.get("id"),
                        //renderTo: Ext.getBody(),
                        html: 'icon number' + record.get("id")
                    });
    Well, the tooltip doesn't work. In fact, the code for the tooltips don't even make it into the DOM, unless I uncomment the 'renderTo' -- which from what I understand isn't desired for containers with layouts.

    The sprites are getting mouseover events, as shown by the mouseover and click listeners.

    Any ideas what I may be doing wrong?

    TIA

  2. Any component will not be put into the DOM until you specify it to be rendered. This is why renderTo config worked as you told it to render. You can use the show* methods to show it which will force it to render.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    I usually use the showBy method in a mouseover event.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks for the reply, Mitchell. I don't quite follow what you are suggesting, though?

    The tip instance doesn't even seem to be getting created.

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Any component will not be put into the DOM until you specify it to be rendered. This is why renderTo config worked as you told it to render. You can use the show* methods to show it which will force it to render.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thank you, that was the clue I needed!

Posting Permissions

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