Streaming live at 10am (PST)

Tooltip following mouse cursor like the one in Webflow pricing table


#1

How can I create a tooltip that follows the mouse cursor just like the one in the Webflow pricing page?

https://webflow.com/pricing

I already created an interaction to show a div on hover. Can I create an interaction that sets the tooltip div position to follow the mouse cursor? Any ideas?

Thanks,
Bogdan


#2

Hey there,

I will take a look at this one tomorrow at work. I'll keep ypu updated with what I've achieved.

Best,
Bartosz


#4

This would be awesome to know how to do as well.


#5

Was there ever an update to this? Seems like a great idea.


#6

The site is not using native code.
It's using some custom code.
Add the tooltop class to a div.

Here it is

<style>
.pricing-feature {
  cursor: default;
}
.is-tooltip {
  cursor: help;
}
.pricing-feature:hover .pricing-feature-text {
  border-bottom-color: #84a2c2;
}
.tooltips {
  position: absolute;
  z-index: 500;
  max-width: 300px;
  background: #fff;
  padding: 12px 18px 16px 18px;
  display: none;
  pointer-events: none;
  opacity: 0;
  border-radius: 3px;
  box-shadow: 0 10px 20px 0 rgba(14, 21, 24, 0.2);
  color: #75848E;
  font-size: 14px;
  line-height: 1.6em;
}
.tooltips.show {
  display: block;
}
.tooltips > div {
  display: none;
}
.tooltips > div.show {
  display: block;
}
.tooltips h4 {
  margin-top: 2px;
  margin-bottom: 4px;
  font-size: 15px;
  color: #323B40;
}
.tooltips p {
  margin-bottom: 0;
}
</style>
<script>
/*global $, tram */
var Webflow = Webflow || [];
Webflow.push(function() {
  var $win = $(window);
  var $doc = $(document);
  var _ = Webflow._;
  var tooltips = $('.tooltips');
  var _tooltram = tram(tooltips)
    .add('opacity 200ms ease-out-quint 250ms')
    .add('transform 400ms ease-out-quint 250ms');
  var moveEvent = 'mousemove.wf-tooltip';
  var showTooltip = false;
  tooltips.length && $('.pricing-features .is-tooltip').on('mouseenter mouseleave', hoverTooltip);
  function hoverTooltip(e) {
    var target = $(e.currentTarget.parentNode);
    var select = target.attr('data-tooltip');
    var entering = e.type === 'mouseenter';
    tooltips.find('.' + select).toggleClass('show', entering);
    $doc.off(moveEvent);
    showTooltip = entering;
    showTooltip && $doc.on(moveEvent, updateTooltip.slow);
    updateTooltip.slow(e);
  }
  function updateTooltip(e) {
    var changed = tooltips.hasClass('show') !== showTooltip;
    tooltips.toggleClass('show', showTooltip);
    if (!showTooltip) {
      _tooltram.stop();
      return;
    }
    if (changed) {
      _tooltram.redraw()
        .set({ opacity: 0, scale: 0.94 }).start({ opacity: 1, scale: 1 });
    }
    var newX = e.pageX + 16;
    var newY = e.pageY + 16;
    var boundsX = $win.width();
    var boundsY = $win.height() + $win.scrollTop();
    var tipWidth = tooltips.outerWidth() + 10;
    var tipHeight = tooltips.outerHeight() + 10;
    if (newX + tipWidth > boundsX) {
      newX = boundsX - tipWidth;
    }
    if (newY + tipHeight > boundsY) {
      newY = boundsY - tipHeight;
    }
    tooltips.css({ top: newY, left: newX });
  }
  updateTooltip.slow = _.throttle(updateTooltip);
});
</script>

#7

Were you able to make this work? Seems like it's a little bit more involved than adding this code and adding the tooltop class to a div. No?


#8