JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="product-card__gg-tag">
icon
<div class="product-card__gg-tooltip">
Guitar gallery means things and stuff.
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ipsum sit fugit, explicabo reprehenderit cumque, hic. Quis tempora, temporibus magnam aspernatur et, impedit dicta at nesciunt reiciendis est ducimus dolores.

<div class="product-card__gg-tag">
icon
<div class="product-card__gg-tooltip">
Guitar gallery means things and stuff.
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ipsum sit fugit, explicabo reprehenderit cumque, hic. Quis tempora, temporibus magnam aspernatur et, impedit dicta at nesciunt reiciendis est ducimus dolores.

<div class="product-card__gg-tag">
icon
<div class="product-card__gg-tooltip">
Guitar gallery means things and stuff.
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ipsum sit fugit, explicabo reprehenderit cumque, hic. Quis tempora, temporibus magnam aspernatur et, impedit dicta at nesciunt reiciendis est ducimus dolores.

CSS

.product-card__gg-tag {
  background: tomato;
  width: 50px;
  height: 50px;
  position: relative;
}

.product-card__gg-tooltip {
  position: absolute;
  left: 100%;
  top: 0;
  background: #ccc;
  padding: 1em;
  display: none;
}

.product-card__gg-tag:hover .product-card__gg-tooltip {
  display: block;
}

JavaScript

var ggIcons = document.querySelectorAll(".product-card__gg-tag");
var gghoverIntent = '';
ggIcons.forEach(ggicon => {
  ggicon.addEventListener("mouseover", function(e){
    gghoverIntent = setTimeout(ggsendData, 1000);
  });
  ggicon.addEventListener("mouseout", function(e){
    clearTimeout(gghoverIntent);
  })
});
function ggsendData(){
	SS.EventTrack.rp("guitarGalleryToolTipHover");
}