Today in this Webflow tutorial we will be creating a text hover-over effect in Webflow. This is a neat feature that can come in handy while creating Webflow websites. It's a great way to add a little more class into your design.
Step 1: First you'll need to add the following script to your <head> code:
<!--Tooltip Styling--><link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/light-border.css"/>
Step 2: After that you will then add the following script to your before <body> custom code:
<!--Tooltip Scripts & Settings--><script src="https://unpkg.com/popper.js@1"></script><script src="https://unpkg.com/tippy.js@4"></script><script>tippy('.tooltip', { animation: 'fade', duration: 200, arrow: true, delay: [0, 50], arrowType: 'sharp', theme: 'light-border', maxWidth: 220, interactive: true,})</script>
Step 3: Then you will need to decide what text, button, link etc that you would like to add the Hover-Over tooltip to. Once decided add an extra class, this class is "tooltip".
Step 4: Then one that same element you'll need to give it a custom attribute. This custom attribute name is "data-tippy-content", the value will be wgat ever you want the Hover-over tooltip to say.
Step 5: You have now successfully created a Hover-over tooltip.
Subscribe to my YouTube channel for more Webflow tutorials.