1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
    Forza Bo is on a distinguished road

      0  

    Default Answered: Tooltip on draw canvas sprites?

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I usually use the showBy method in a mouseover event.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
    Forza Bo is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
    Forza Bo is on a distinguished road

      0  

    Default


    Thank you, that was the clue I needed!

Thread Participants: 1