Hover text - Buttons

Hey Tada Community-

Does anyone have some guidance on how to allow hover text to show when the cursor is over a button on a page. For example, if the cursor is hovering over a link button in a table, text would show to “record payment” (see picture below).

Thanks in advance,
Adam

Hey @SafetyUniversity!

Check this out - I hope it helps :grinning:


Website

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

JavaScript

TB.render('component_XX', function (data) {
    tippy('.myButton', {
        content: 'My tooltip!',
    });
});

Many thanks @tim.young.This is an excellent option.

Adam

1 Like

Great thanks, that worked. Although its shame that tooltips are not a standard feature.

Hey @mtif, this has actually been suggested before and since I initially made the suggestion, I agree! :laughing:

We frequently use suggestions from #suggestion-box for feature updates.

Show your love on this one :heart:

Tooltips or hover pop ups

@tim.young how could I get the same behavior on the edit, details or delete icons in a table?

J

Hey @frinksterj,

Would you mind posting some screenshots of your details/edit/delete links? Are you saying you removed the text from the link and are only displaying icons?

@tim.young That is correct, I have removed the text from the Edit and Details buttons and turned them into Icons. I am able to get tippy working with a separate HTML Button but the same is not working for the Table Action Links. I even ensured that I am using the right Class on the css. #mybutton vs .mybutton.

Can you confirm that the correct component_id is added to the JS API?

TB.render('component_XX', function (data) {
    tippy('.myButton', {
        content: 'My tooltip!',
    });
});

@tim.young Yes it’s component 40 in my case.

TB.render(‘component_40’, function(data) {
tippy(’.myButton’, {
content: ‘My tooltip!’,
});
});

Hi @frinksterj,

Please change your CSS class to myButton (with a capital B) :wink:

That was the problem. I didn’t realize the button class was case sensitive.