Javascript Girl
  1. Javascript Girl
  3. Utilisation de qTip2 avec jQuery Vector Maps (jqvmap)
Intereting Posts
Manipulation de prises multiples dans la chaîne de promesses Si (la condition échoue dans jascript) Ce qui provoque "la fonction n'est pas définie" lors du passage d'une chaîne à setTimeout? Sélectionnez toutes les options dans optgroup XMLHttpRequest change POST to OPTION Le passage d'une fonction de rappel en javascript est-il nécessaire? Index d'un très grand nombre Fibonacci Comment puis-je imprimer un certain bloc / partie d'une page Web? WebDriver: Changer l'événement sans tirer Bangalore geojson carte avec d3 js Angulaire 2: obtention de RouteParams du composant parent Pourquoi IE 8 fait-il passer le curseur à la fin de la zone de texte pour ce JS? DOMParser est indéfini dans IE9 Implémentation d'une notification push à l'aide de chrome dans Django Que fait le pseudo protocole JavaScript?

Utilisation de qTip2 avec jQuery Vector Maps (jqvmap)

J'essaie de désactiver la racine d' outil par défaut utilisée dans jqvmap et je souhaite utiliser qTip2 à la place. Y'a-t-il une quelconque façon de réussir cela? Voici le violon .

Code jquery: 

jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: null, color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: true, showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial', onLabelShow: function(event, label, code) { $("#jqvmap1_" + code).qtip({ content: { text: code }, position: { my: 'top left', at: 'bottom right' } }); event.preventDefault(); } });

Quelque chose sur JQVMap bloque le fonctionnement de qTip2 et il est plus facile de faire exactement ce que vous dites: "Désactiver la info-bulle par défaut" . J'ai supprimé onLabelShow et définissez showTooltip sur false . Ensuite, ajoutez qtip directement dans les chemins SVG, en extrayant le code du pays à partir du chemin d'accès id . 

 $("path[id^='jqvmap11_']").each(function () { var $code = $(this).attr('id').replace('jqvmap1_', ''); var $content = my_map_data[$code].name + ' | Data: ' + sample_data[$code]; $(this).qtip({ content: $content }); });

La variable my_map_data contient les objets du chemin du pays à partir du fichier jquery.vmap.world.js avec les noms de pays. J'ai dû adapter le fichier afin qu'il soit comme: 

 /** Add World Map Data Points */ var my_map_data = { "id":{"path":"M781.etc.etc","name":"Indonesia"}, "pg":{"path":"M852.etc.etc","name":"Papua New Guinea"}, "mx":{"path":"M137.etc.etc","name":"Mexico"}, /* etc */ }; jQuery.fn.vectorMap('addMap','world_en',{'width':950,'height':550,'pathes':my_map_data }); 
 jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: null, color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: true, showTooltip: false, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial', }); $("path[id^='jqvmap1_']").each(function () { var $code = $(this).attr('id').replace('jqvmap1_', ''); var $content = my_map_data[$code].name + ' | Data: ' + sample_data[$code]; $(this).qtip({ content: $content, position: { target: 'mouse', adjust: { x: 0, y: 17 } }, style: { border: { width: 30, radius: 8, color: '#6699CC' }, } }); }); 
 .fiddle-header { background-color: #ccc; margin:0 0 10px 0; text-align: center; color: #fff; font-family: sans-serif; } .fiddle-header a { text-decoration: none; color: #eee } #vmap { width: 600px; height: 400px; } .jqvmap-label { position: absolute; display: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #292929; color: white; font-family: sans-serif, Verdana; font-size: smaller; padding: 3px; } .jqvmap-zoomin, .jqvmap-zoomout { position: absolute; left: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #000000; padding: 3px; color: white; width: 10px; height: 10px; cursor: pointer; line-height: 10px; text-align: center; } .jqvmap-zoomin { top: 10px; } .jqvmap-zoomout { top: 30px; } .jqvmap-region { cursor: pointer; } .jqvmap-ajax_response { width: 100%; height: 500px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://jqvmap.com/js/vmap/jquery.vmap.js"></script> <!-- MODIFIED VERSION OF THE FILE jquery.vmap.world.js --> <script src="https://cdn.rawgit.com/brasofilo/8113470a8efef43968d4/raw/0b44a75c308f905b19667df9e712de09ff9c9ca1/jquery.vmap.world.js"></script> <script src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.js"></script> <link href="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet"/> <script src="http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js"></script> <h3 class="fiddle-header">SO 21103404</h3> <div id="vmap"></div>