Tooltip not showing on first hover

[Muhlegg]

I added a simple tooltip to my dataview but can't really get it to work properly. Otherwise it works fine but the tooltip does not show on the first hover, you have to hover a second time to get the tooltip and then it works every time.

the tooltip trigger, dataview on 'mouseenter'

'mouseenter': {
    fn: function(dataView, index, node, e) {
        var record = dataView.getRecord(node);  
        this.showHoverInfo(record.data);
        drawLocation(record.data.lon, record.data.lat, 'hover', record.data.id);                    
    },
    scope: this
} 

the tooltip function

    showHoverInfo: function(data) {
        console.log('img_'+data.filename);
        var target = Ext.get('img_'+data.filename);
        
        new Ext.ToolTip({
            target: target,
            title: '',
            autoWidth: true,
            html: 
                '<div class="img-tooltip">' +
                    '<b>' +data.header+ '</b> by ' +data.username+ '<br>' +
                '<span class="img-tooltip-desc">' +data.description+ '</span>' +
             '</div>',
            trackMouse: true,
            dismissDelay: 10000,
            anchor: 'right'
        });
    } 

The tooltip function runs every time but it just won't draw the tooltip.

Any ideas? Probably rather simple solution

[Condor]

A tooltip shows when the mouse enters the target, but you are creating the tooltip when the mouse is already over the target.

Create the tooltip when the page is created and create it only once (your code would create the tooltip EVERY time the mouse hovers over an item).

ps. Have you seen Animal's DataTip user extension? That would save you a lot of memory because it only creates one tooltip for the entire dataview.

[Muhlegg]

Ok thanks, I'll have a look at it.

EDIT
Animal's plugin was the perfect solution, thanks again.