Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Tooltips in GB?

  • Stefanie
    April 13, 2025 at 9:26 am

    Hi team,

    I’m looking for a way to create tooltips (for links or general for elements).
    Specifically, when I hover over a link that opens in a new tab, I need a tooltip to appear that says: “opens a new window”

    How can I implement this in GB?

    I have seen something similar on your GP Pricing page

    Is there a snippet for this?

    Thank you!

  • Ying
    April 14, 2025 at 9:38 am

    Hi there,

    You can create a :before selector for the link, and set it to display:none in normal state, and set it to display: block in hover state.

    You can position it by setting the position to absolute (the link/text main selector needs to be set to position: relative), and play with the left/right/bottom/top inset values.

  • Stefanie
    April 14, 2025 at 1:24 pm

    Sorry, I can’t manage that.
    How can I set a :before selector to a hover state?
    Where can I save the text that should appear in the tooltip on hover?

  • Ying
    April 14, 2025 at 2:55 pm

    How can I set a :before selector to a hover state?

    Create a selector .gb-element-xxxxxxx:hover:before.

    Where can I save the text that should appear in the tooltip on hover?

    In the content field of the .gb-element-xxxxxxx:beforeselector.

  • Stefanie
    April 15, 2025 at 12:55 am

    Hi Ying,

    thanks for your hints, but unfortunately that doesn’t work at all.

    Can you tell me how it was done on your pricing page?

    link in private

  • ke.nikka
    April 15, 2025 at 2:40 am

    Please consider voting for tooltips: https://feedback.generatepress.com/113.

  • Alvind
    April 15, 2025 at 7:18 am

    Hi there,

    The tooltip used on the GeneratePress site is powered by a third-party library called Microtip.

    If you’d like to implement the same approach, you can follow the official documentation here:
    https://microtip.vercel.app/

  • Stefanie
    April 16, 2025 at 1:14 am

    Hi Alvind,

    thanks for the tip with the library! It works very well.

    There is just one last question:
    I would like to add a tooltip to individual links within a paragraph.

    Could you take a look at the page in the private field?
    Do you have any idea how I can add HTML attributes to the linked words in the text?

    Thank you!

  • Ying
    April 16, 2025 at 8:39 am

    I don’t think it’s possible to add attributes to the linked words, but you can target it with selector .gb-text-xxxxxx a.

    Below is a text block that made by the method I said, have a look 🙂 

    <!-- wp:generateblocks/text {"uniqueId":"781a4e5d","tagName":"p","styles":{"a":{"color":"#ed1515","position":"relative"},"a::before":{"content":"\u0022test\u0022","position":"absolute","display":"none","bottom":"100%","left":"50%","transform":"translate3d(-50%, 0px, 0px)"},"a:hover::before":{"display":"block"}},"css":".gb-text-781a4e5d a{color:#ed1515;position:relative}.gb-text-781a4e5d a::before{content:\u0022test\u0022;position:absolute;display:none;bottom:100%;left:50%;transform:translate3d(-50%,0px,0px)}.gb-text-781a4e5d a:hover::before{display:block}"} -->
<p class="gb-text gb-text-781a4e5d">This is a paragraph. Within this paragraph <a href="https://gp-one.carenda.de/tooltip/#"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-base-2-color">one or more words</mark></strong></a> should be linked.</p>
<!-- /wp:generateblocks/text -->
  • Stefanie
    April 16, 2025 at 9:38 am

    Hi Ying,

    Unfortunately, that’s not what I mean.

    At Alvind’s suggestion, I have integrated the Microtip Tooltip Library.

    And it works well, as you can see on my page.
    The blue button is equipped with a tooltip from the Microtip Library.

    This works very well for the button because it is a block element.
    However, I need the tooltip for an inline element (in the middle of a paragraph).

    For the tooltip to work, the HTML must be equipped with certain attributes:
    https://prnt.sc/FJwSMg3zJWwz
    Usage: https://prnt.sc/KR3ZR2_xPvxu

    How can I get GB to set a <span> tag within the paragraph so that I can assign the HTML attributes to this span tag?

  • Ying
    April 16, 2025 at 12:44 pm

    How can I get GB to set a <span> tag within the paragraph so that I can assign the HTML attributes to this span tag?

    You can use the WP highlight option in the floating toolbar, but it adds <mark> tag around the link, and the text block does not have the option for you to fill attributes for its child elements.

    So no, I don’t think you can do so. You might need to use a custom HTML block to manuuly add the text/link and attributes.

  • Stefanie
    April 17, 2025 at 5:29 am

    Ok, thanks for your help, Ying!

    You might need to use a custom HTML block

    Yes, I’ve done it this way now if need be.

    Thanks 🌷

  • Ying
    April 17, 2025 at 9:46 am

    You are welcome   🙂

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.