Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] tooltip follow a cursor
Forum PHP.pl > Forum > Przedszkole
martex
jak zmusić tooltipa do podążania za kursorem div ot map-tooltip
http://jsfiddle.net/HJf8q/2/ takie coś znalazłem ale nie mogę sobie poradzić aby to tchnąć do działania
może ktoś pomoże i mnie nakieruje co i gdzie a możę inaczej
#strt #end tym chciałem tego dokonać
  1. #START
  2. var tooltipSpan = document.getElementById('map-tooltip');
  3. window.onmousemove = function (e) {
  4. var x = e.clientX,
  5. y = e.clientY;
  6. tooltipSpan.style.top = (y + 20) + 'px';
  7. tooltipSpan.style.left = (x + 20) + 'px';
  8. };
  9. #END
  10. $('#map-poland .label').on({
  11. mouseenter : function() {
  12.  
  13. $this = $(this);
  14. $liWoj = $(this).parent('li');
  15. $txt = $liWoj.find('a').text();
  16.  
  17. $w = $this.outerWidth();
  18. $s = $this.outerHeight();
  19. console.log($txt);
  20.  
  21. $liWoj.addClass('focus');
  22. //$('body').append('<div id="map-tooltip" class="tooltipsmaps" style="left:; top:;">'+$txt+'</div>');
  23. $(this).append('<div id="map-tooltip" class="tooltipsmaps" style="left:; top:62px; z-index:99999 !important; font-family: museoslab500, Helvetica, Arial, sans-serif; " >'+$txt+'</div>');
  24.  
  25.  
  26. },
  27.  


albo moze do top i left dodać pozycje kursora /?questionmark.gif
kamil4u
Opisz problem dokładniej. W linku, który podałeś wszystko jest jak na tacy, więc w czym problem?
martex
chodzi mi o diva na dole z txt
jest to mapka od wolfa i na wojewodztwach jest ok ale na labelach czyli w srodku wojewodztwa sa wartosci i na nie jak najade mam przyklejonego tooltipa nie porusza sie wzgledem kursora :/
werdan
W tym kodzie co podałes to nie zadziała.



Na początku łapiesz
  1. var tooltipSpan = document.getElementById('map-tooltip');

a map-tooltip dodajesz dopiero na końcu kodu, wiec wczesniej go nie ma. Dodaj tę funkcję po dodaniu map-tooltip.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.