bogdan
(Bogdan)
November 25, 2014, 8:49pm
1
How can I create a tooltip that follows the mouse cursor just like the one in the Webflow pricing page?
Create powerful, custom websites with your team on Webflow. Start building for free and add a paid plan later to unlock premium hosting, design, and collaboration features.
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
1 Like
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
2 Likes
matthew1818
(Matthew Marshall)
December 6, 2014, 7:05pm
4
This would be awesome to know how to do as well.
Was there ever an update to this? Seems like a great idea.
Revolution
(Revolution)
October 11, 2015, 11:54pm
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>
1 Like
Apiant
(Apiant)
March 14, 2016, 12:35am
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?