JSFiddle - React, Tailwind, and code Playground

by xawixawxaw

HTML

<svg width="801pt" height="1249pt" viewBox="0 0 801 1249">
    <path id="144400000" class="car mountainProvince" d=" M 353.94 308.81 C 358.28 306.79 360.04 301.02 365.14 300.40 C 368.59 300.38 371.77 302.05 375.03 302.98 C 375.43 307.66 375.79 312.34 375.68 317.05 C 370.81 317.21 365.81 316.86 361.07 318.22 C 357.12 319.69 353.53 322.94 349.05 322.29 C 343.76 321.52 338.43 322.10 333.34 323.65 C 333.48 327.92 332.85 333.36 328.68 335.59 C 326.33 336.90 325.74 333.51 324.64 332.15 C 323.43 330.54 321.22 329.31 321.29 327.07 C 321.01 321.24 319.28 314.46 323.53 309.58 C 326.29 308.08 330.16 307.88 330.65 304.06 C 333.58 304.58 336.51 305.11 339.43 305.74 C 342.90 310.01 349.03 310.88 353.94 308.81 Z" />

        <path id="012800000" class="reg1 ilocosNorte" d=" M 321.39 198.07 C 322.59 197.76 323.80 197.45 325.01 197.14 C 326.32 199.08 327.48 201.22 329.34 202.71 C 330.75 203.48 332.46 203.31 334.01 203.61 C 333.66 208.13 332.22 212.46 331.69 216.94 C 331.88 222.35 331.74 227.91 333.41 233.12 C 329.62 237.14 331.19 242.84 330.21 247.78 C 328.18 247.63 326.14 247.35 324.10 247.54 C 322.49 248.37 321.30 249.80 319.96 250.98 C 315.47 251.35 314.59 256.66 310.47 257.59 C 308.14 258.70 304.87 258.93 303.75 261.62 C 302.93 263.16 302.21 264.75 301.42 266.30 C 301.35 264.64 301.31 262.99 301.30 261.33 C 302.75 258.87 302.85 256.02 302.80 253.25 C 300.58 252.90 298.35 252.65 296.11 252.49 C 297.43 250.71 298.91 248.96 299.64 246.83 C 299.68 244.27 298.01 241.61 299.38 239.19 C 300.33 237.18 301.32 235.16 301.78 232.97 C 302.83 228.27 306.63 224.72 307.51 219.96 C 308.03 215.84 306.29 211.96 305.29 208.07 C 306.35 206.83 307.64 205.82 308.86 204.75 C 312.51 205.62 317.10 206.92 320.29 204.28 C 321.28 202.37 321.14 200.14 321.39 198.07 Z" />
</svg>

JavaScript

$(function () {
            var x = $('svg').find('path');
            for (i = 0; i < x.length; i++) {
                var $x = $(x[i]);
                var y1 = $x.attr('class').split(/\s+/);

                console.log(y1);
                
                switch (y1) {
                    case 'reg2': 'Region 2';
                    case 'reg3': 'Region 3';
                        
                }
               
                $x.attr('title', y1 + ": " ).qtip({
                    style: { classes: 'qtip-tipsy' },
                    position: {
                        target: 'mouse',
                        adjust: { mouse: false }
                    }, //show: {event: 'click'}
                }).mouseenter(function () {
                    $(this).css({ opacity: .7 })
                }).mouseout(function () {
                    $(this).css({ opacity: 1 })
                });;
            }
 });