Remplacement du Tooptip du navigateur par qTip

Question

Je n'arrive pas à remplacer l'info-bulle par défaut du navigateur par qTip. Jusqu'à présent, j'ai:

$('[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' 
        } 
       }    
      }); 
     } 
    }); 

Mais en réalité, dans le navigateur que je reçois:

Je vous remercie de votre aide.

Merci.

Answer 1

La valeur par défaut de plug-in pour le contenu est l'attribut title, donc si vous supprimez l'option du contenu de votre code d'initialisation, plug-in doit prendre soin d'enlever l'attribut de l'élément

De docs:

Remplacement les anciennes bulles d'aide de votre navigateur sont simples.
Appelez simplement la méthode qtip() sur tous les éléments de lien sans contenu
option (il utilisera par défaut l'attribut title de la cible).

Answer 2

Appelez removeAttr('title') sur votre collection.

Le navigateur n'affichera pas l'attribut title par défaut.

Answer 3

C'est la solution:

 $('[title]').qtip({ 
     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' 
      } 
     }    
    }); 

Cet extrait de code pour faire infobulle tous les composants avec attribut title présent.