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

GB Pro – Button Tooltip

  • shaunkillian
    August 13, 2023 at 12:01 am

    Hi
    I want to create a tooltip for a specific class (.tooltip) of a GB Pro button using custom attributes and a little CSS, but I cannot get it to work.
    Below is what I have tried.

    CSS
    .tooltip {
    position:relative; /* making the .tooltip span a container for the tooltip text */
    border-bottom:1px dashed #000; /* little indicater to indicate it’s hoverable */
    }

    .tooltip:before {
    content: attr(data-text); /* here’s the magic */
    position:absolute;

    /* vertically center */
    top:50%;
    transform:translateY(-50%);

    /* move to right */
    left:100%;
    margin-left:15px; /* and add a small left margin */

    /* basic styles */
    width:200px;
    padding:10px;
    border-radius:10px;
    background:#000;
    color: #fff;
    text-align:center;

    display:none; /* hide by default */
    }

  • David
    August 13, 2023 at 5:58 am

    Hi there,

    the main issue is the: content: attr(data-tooltip); had the wrong attribute name.
    And there was some odd “spaces” in the CSS>

    Try this to get started:

    .tooltip {
    position: relative;
}
.tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #000;
    display: none;
}
.tooltip:hover:after {
    display: block;
}
  • shaunkillian
    August 13, 2023 at 3:34 pm

    Thanks David
    That was a huge help! I have been able to get it to work on the buttons within the page content. However, I modified the code for the button in the top bar, so that the tooltip appears on the left. Sadly, it doesn’t work.

    Button Settings: Below

    CSS:
    /*You Deserve It Button Animation in Topbar*/
    .topbartooltip {
    position: relative;
    }
    .topbartooltip:after {
    content: attr(data-toptooltip);
    position: absolute;
    top: 0;
    right: 105%;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    margin-right: 10px;
    background-color: rgba(158, 62, 31, 0.5);
    display: none;
    justify-content: center;
    text-align: center;
    }
    .tooltip:hover:after {
    display: block;
    }

  • Fernando
    August 13, 2023 at 6:21 pm

    Hi Shaun,

    You’re missing a hover CSS rule for the top bar tool tip.

    Your overall code should be something like this:

    .tooltip,
.topbartooltip {
    position: relative;
}

.tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #000;
    display: none;
}

.topbartooltip:after {
    content: attr(data-toptooltip);
    position: absolute;
    top: 0;
    right: 105%;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    margin-right: 10px;
    background-color: rgba(158, 62, 31, 0.5);
    display: none;
    justify-content: center;
    text-align: center;
}

.tooltip:hover:after,
.topbartooltip:hover:after {
    display: block;
}
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.