jqueryhtmlcsssvgjquery-svg

Show path title on path hover

I am trying to show path title on hover. If I mouse on id="PL-KO" hover show on path demo 1. I can show path title hover other div. Please see demo.

JSfiddle demo

I want like this. How can I do this? enter image description here

enter image description here

Solution

  • Use mousemove for accurate position and add some css:

    jQuery("path").mousemove(function(e) {
  jQuery(".hovertext").text(jQuery(this).attr('title'));
  jQuery(".hovertext").css({
    'top': e.pageY - 20,
    'left': e.pageX
  }).fadeIn('slow');
});
    .hovertext {
  position: absolute;
  background-color: #cecece;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="container-fluid">
  <div class="hovertext"></div>
  <div class="col-md-6 col-md-offset-3">
    <svg inkscape:version="0.92.1 r15371" version="1.1" viewBox="0 0 82.931976 60.358006" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd">
      <g transform="translate(-37.909 -65.737)" stroke="#fff" stroke-width=".13229" inkscape:groupmode="layer" inkscape:label="Layer 1">
        <path id="PL-KO" class="land" d="m91.191 126.03-0.39423-0.32544-0.97102-0.17992-0.82286-0.57943-1.0319-0.29634-4.9318-0.9181-1.3494-0.56356-1.2092 0.17462-2.0135-0.22754-0.59796-0.23019-0.14552-0.24871 0.4445-0.62706-0.4445-1.995-1.0319-0.94721-0.26194-0.67733-8e-3 -0.56885 0.58473-1.5108-0.28839-0.41805-2.1246-0.86783-0.85196-0.0873-0.43127-0.39687-1.4737-0.52652-0.53975 0.0212-0.64823-0.53975-0.5371 0.082-0.76465-0.30163-0.42862 0.0741-0.50535-0.72496-1.6457-0.88635-0.54504-0.62177-0.10848-0.57679-1.442-1.487-1.0239-0.71173-0.6694-0.96573-0.0953-0.57415-0.51593-0.79375-1.7277-0.74348-0.67998-0.78845-0.29898-0.16405-1.696-0.0688-1.307-0.79639-0.64294-3e-3 -0.72231-0.3519-1.4129-0.99748-1.7118-0.2196-0.42863-0.62442-0.81756 0.0159-1.2515-0.56621-0.40481-0.61648-0.0212-1.2091-1.815-0.61912-0.18256-0.25929 0.10318-1.0821-1.7251-1.6484-0.25929-0.88106-0.66146-0.78846-0.34131-1.6351-1.1298-0.69056-0.86519-1.3414-0.76465-0.63765-1.8865-0.88106-0.47095 0.19314-0.1905 0.45244l-0.92075-0.96044-0.15346-0.43391 0.42598-0.98161 0.74612-0.12964 0.29369-0.42334 0.29104-1.0213-3e-3 -1.8441 2.9872-3.7042 0.43391-1.1562 0.0423-1.2859 1.0372-0.55298 1.4288-0.42069 1.061-0.68792 1.9394-0.61648 0.64823-0.0503 0.46302 0.254 0.98955 0.12171 1.0372 0.70644 0.23813-0.24606 2.0029 1.0424 1.0186 0.21696 2.0558 1.0822 1.4261 0.18256 1.307-0.27781 0.64029 0.27517 0.60589-0.14553 2.4712 1.1271-0.09 1.18 0.79904 0.84138 0.87578 1.3573 1.1033 0.25135 0.75141 0.45509 1.95 0.58473 1.7806-0.56092 0.5371 0.42333-0.0476 2.5003-0.22225 0.46567 0.30163 0.23813 1.3705-0.0265 1.6351 0.254 3.2861-1.8732 0.85725-1.1721 0.3175-0.99748 0.73819-0.39687 0.80169 0.0926 1.2674 0.89429 0.71967 0.0397 0.52916-0.52917 0.889-0.27781 0.79111 0.254 1.0954-0.70379 0.81227 0.47096 0.48948 0.66675 2.3548 0.29633 0.52388 0.9234 0.77787 0.19843 1.5743-0.4736 0.5424 0.50271 0.46567 0.13758 0.12435 0.66146-0.53975 1.1139 0.58473 0.1905 0.60325 0.13229 0.89165 0.80698 0.34396 0.6985-0.17728 2.032 0.43128 0.36777 0.1905 0.48683-0.67205 0.83344-2.2225 1.9368-0.99218 0.02646-0.75407-0.8255-0.11377-0.7329-0.42598-0.17992-1.7648 0.7911-0.90487 0.75671-0.81757 1.1377-0.2487 1.016 0.5715 2.249 0.40745 0.49477 0.10319 2.5241 0.55563 0.49213 0.86254 0.0741 0.27252 1.6484-0.0661 0.65617-0.9525 0.65352-0.24342 0.64823 0.0688 0.66939-0.35719 1.5822-0.37306 0.44715-0.31221 0.0344-0.13493 1.2091 0.1561 0.87313 2.2542 0.34131 0.44979 0.57944 0.75936 0.22754 1.86-0.60854 0.93133 0.0714 1.098-0.67204 0.37571 3e-3 0.67469-0.34661 0.17992 1.5981-0.0794 1.1139 0.46566 0.52123 1.0663 0.508 0.76465-0.61119 0.62971-0.0159 0.63235 0.55827 0.85196 0.0979 1.0398 0.86784-0.27252 1.5002 0.0582 1.0636-0.70908 0.26194-1.2144-0.037-1.3414 1.9076-0.0317 1.0848-0.52387 1.5902 0.56356 1.4314 0.0767 0.84402-0.2884 0.79375-0.9181 0.35189-1.2859 0.10848-0.32543-0.16933-0.61913-0.93663-1.4949-0.43656-0.23548 1.6589z"
        fill="#f60" inkscape:connector-curvature="0" title="Demo 1" />
        <path id="PL-ZE" class="land" d="m103.21 114.32-0.51065-0.30163-0.37041 0.0582-0.45773 0.13494-0.67205 0.66675l-1.0398-0.86784-0.85196-0.0979-0.63235-0.55827-0.62971 0.0159-0.76464 0.61119-1.0663-0.508-0.46566-0.52123 0.0794-1.1139-0.17992-1.5981-0.67469 0.34661-0.3757-3e-3 -1.098 0.67204-0.93133-0.0714-1.86 0.60854-0.75935-0.22754-0.4498-0.57944-2.2542-0.34131-0.1561-0.87313 0.13494-1.2091 0.31221-0.0344 0.37306-0.44715 0.35719-1.5822-0.0688-0.66939 0.24341-0.64823 0.9525-0.65352 0.0661-0.65617-0.27252-1.6484-0.86254-0.0741-0.55563-0.49213-0.10318-2.5241-0.40746-0.49477-0.5715-2.249 0.24871-1.016 0.81756-1.1377 0.90487-0.75671 1.7648-0.7911 0.42597 0.17992 0.11378 0.7329 0.75406 0.8255 0.99219-0.02646 2.2225-1.9368 0.67204-0.83344-0.1905-0.48683-0.43127-0.36777 0.17727-2.032-0.34396-0.6985-0.89165-0.80698-0.60325-0.13229-0.045-0.27252 2.1775-1.3203 0.95779-1.3018-8e-3 -1.7912-0.89429-0.96838-0.24077-0.87312-1.4526-1.6722-0.30691-0.94192-0.59532-0.45773-0.28046-0.91281 0.68528-0.22225 0.53181 0.24342 0.15346 0.63235 1.6007 1.6801 0.92868 1.8071 0.56357-0.19314 0.66675 0.0635 0.74877-0.33073 0.43656 0.54239 1.3997-0.30956 2.159 0.18256 2.966 1.7595 0.88107-0.0132 1.987-0.65617-0.91546-1.5187-1.442-0.71703-1.6933-0.42333-0.0106-0.81492-0.87048-0.58472-0.65617 1.1165-0.57944 0.15346-0.29633-1.8071-0.35454-1.061-1.0372-1.7859-0.10583-0.82285 1.9262-2.1511 0.23283-0.84402 0.96308-1.2039 1.3018-1.2144 0.80698-0.49478 0.15081-0.85725 0.66411-0.9181 0.59796 0.4154 0.17198-0.3519 0.38364 0.30163-0.45244 0.56885 0.25136 0.20637 0.35189-0.10318 0.0714 0.43127 0.30428 0.0556 0.77787-0.44715 0.15875 0.19315-0.3175 0.2831 0.51594-0.15081 0.49741 0.1561-0.0767 0.44715 0.34925-0.3466 0.19844 0.0238 0.037 0.21166 0.19579-0.17198 0.25665 0.12965 0.082 0.50271-0.26987 0.46567 0.45243 0.31485 0.71702 8e-3 -0.0344-0.37306 0.62437 0.16404 0.46302 0.53446 0.96309 0.25664-0.0265 0.47096 0.4101 0.32015 0.0265 0.40745 0.62442 0.22755 0.30956-0.18257 0.85196 0.25136 0.20373 0.32014-0.0979 0.46038 0.43921 0.0688 0.0159 0.43921 0.27517 0.23283 0.045 0.381 0.96837-0.0926 0.62442 0.36248 0.3519-0.0873-0.0476 0.28046 0.29898 0.16669-0.17198 0.53445 1.0663 0.3175-0.21696 1.053 0.12436 0.86254 1.0081 2.5003-0.37042 3.4184 0.18521 0.61913-0.0767 0.58472-0.83873 2.4077 0.33867 0.73554-0.74877 0.40482-0.36777 1.1562-3.1565 1.4658-0.16933 0.62971-0.61913 0.57943-0.82021 1.5796 0.2249 1.4896-0.95779 0.60325-1.1139 0.14552-0.71437 0.58208-0.61913 1.1509 0.13229 0.71967 0.31221 0.42598 0.62706 0.40217 1.1562-0.02381 0.11113 0.91281 0.94985 0.65088 0.12171 0.78846-0.50006 0.13758-0.34396 0.77788-0.11377 1.1377 0.31485 1.3018-3.3761 1.5425-1.569 0.0635-2.2913 0.57414-0.59531 1.1271 0.26723 1.1959 0.58208 0.66675 0.0423 0.98425 0.78052 0.93662 0.35719 0.88106-0.66675 1.9659-0.46567 0.42598-0.74612 0.26987-0.381 0.50536-0.9234 0.46302z"
        fill="#ffd42a" inkscape:connector-curvature="0" title="Demo 2" />
      </g>
    </svg>
  </div>
</div>