Replacing Browser's Tooptip by qTip

Question

I am having trouble to replace the browser's default tooltip by qTip. So far I have:

    $('[title]').each(function(){
        var cont = $(this).attr('title');
        if(cont != ''){
            $(this).qtip( {
                content: cont, 
                style: { 
                    background: '#FFFFCC',
                    color: '#000000',
                    name: 'cream' ,
                    border: {                    
                        radius: 4,
                        color: '#FCC200'
                    },
                    textAlign:'center',
                    tip: {
                        corner: 'bottomLeft',
                        size: {
                            x: 20,
                            y: 8
                        }
                    }
                },
                position: {
                    corner: {
                        target: 'topRight',
                        tooltip: 'bottomLeft'
                    }
                }            
            });
        }
    });

But actually in browser I am getting:

I really appreciate your help.

Thanks.

Answer 1

The plugin default for content is the title attribute, so if you remove the content option from your initialization code, plugin should take care of removing the attribute from element

From docs:

Replacing the regular old title tooltips of your browser is simple.
Just call the qtip() method on all link elements with no content
option (it will use the title attribute of the target by default).