No JavaScript Needed: Simple CSS Tooltips in ClickFunnels
For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com
Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-c...
Welcome back! This is Dan Havey with CF Ninja Hacks, and today I'm going to show you how to create a simple tooltip using only CSS in your ClickFunnels 2.0 account. You can also apply the same technique in ClickFunnels 1.0 and many other platforms. If you're not familiar with tooltips, they're those little question marks or icons you see on the screen that reveal helpful information when you hover over them. Let's dive in and see how easy this is to set up.
First, we'll go into the editor and add a text element. Once we have our text element, we'll click on it and insert an icon, specifically a question mark icon, right at the end. ClickFunnels makes this easy, and you can customize the size of the icon as needed. After saving the page, we'll go back to the headline element and click on the little icon to open the CSS, HTML, and JavaScript editor for that specific element.
Next, we need to generate an ID for our text element. Click the "generate an ID" button and copy the generated ID. Paste it into the appropriate place on the left-hand side of the editor. For simplicity, we'll remove any unnecessary elements and focus on our main text element. Save your changes, and let's move on to inspecting our tooltip.
To inspect the element, right-click on it and select "Inspect" or click on the square with the arrow pointing into it. This opens up the inspector where you can see all the details about your element. You'll see the ID we generated and the icon with a tag of 'I' for the Font Awesome icon we're using. For our tooltip, we need to adjust the positioning of the icon slightly using relative positioning and move it up by 5 pixels.
Now, let's define what happens when we hover over the icon. In the CSS editor, we'll create a pseudo-element, specifically an "after" pseudo-element because "before" is already used. This new element will be styled and positioned absolutely within its bounding element. We'll set its content, size, color, font, and other properties to ensure it looks exactly how we want. This involves positioning it relative to the icon and using properties like top, right, width, padding, and z-index to bring it to the front.
Finally, remember to copy and paste this setup for any other tooltips you want to create, changing the content and positioning as necessary. This method ensures that no matter the screen width, your tooltip stays perfectly positioned relative to the question mark icon. That's it for this video! If you have any questions, feel free to let me know.
Auf dieser Seite können Sie das Online-Video No JavaScript Needed: Simple CSS Tooltips in ClickFunnels mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer CF Ninjas 01 April 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 14 Mal angesehen und es wurde von 0 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
