Mouse hover yaptığında tooltip yerine görsel göstermek (HTML+CSS+Javascript)

Bu soru 2 kez yanıtlandı.

• coderguru

  8 Temmuz 2019 12:17

  28

  Yazılandan benim anadığım şöyle bir şey:

  

  Yukarıdaki Standart tooltip yazısı bildiğimiz title özelliği:

  <div title="regular tooltip">Standart tooltip</div>

  Aşağıdaki ise mouse imleci ile üzerine geldiğinizde bir jpg ya da gif gibi bir görseli imlecin üzerinde hover işlemi ile birlikte gösteren bir a etileti.

  
  <a class="tooltip" href="http://www.google.com/">
      Afili tooltip
      <span id="afili-span">
          <img alt="Şekilli Hover" src="https://media.giphy.com/media/AVI22zTw4QUpO/giphy.gif" />
      </span>
  </a>

  Ancak html kodlarından da görebileceğiniz gibi aslında bu görseli gösteren bir title kullanmıyoruz, aksine sizin istediğiniz gibi arka planda çalışan bir javascript kodu var ve windows.onmousemove özelliği ile şu şekilde çalışıyor:

  var sekilliSpan = document.getElementById('afili-span');
  
  window.onmousemove = function (e) {
      var x = e.clientX,
          y = e.clientY;
      sekilliSpan.style.top = (y + 20) + 'px';
      sekilliSpan.style.left = (x + 20) + 'px';
  };

   

• koroglu

  13 Aralık 2021 18:43

  0

  bkz: div'e tooltip nasıl eklenir? (HTML ve CSS)