Hover text - Buttons

App Development
1

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).

recordpayment
recordpayment710×362 76.9 KB

Thanks in advance,
Adam

1 Like
2

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!',
    });
});
2 Likes
3

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

Adam

1 Like
4

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

5

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

1 Like
6

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

J

7

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?

8

@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.

Capture
Capture1446×520 54 KB

9

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!',
    });
});
10

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

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

Capture
Capture1042×738 34.3 KB

11

Hi @frinksterj,

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

12

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

13

Tippy has stopped working for me,the unpkg link doesn’t work.
Any clues ?

698rd7OjZw:143          GET https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js net::ERR_ABORTED 403
698rd7OjZw:142          GET https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js net::ERR_ABORTED 403
VM34094:3 Uncaught ReferenceError: tippy is not defined
    at <anonymous>:3:5
    at HTMLDocument.<anonymous> (script-1666808347529.js:21:22181)
    at HTMLDocument.dispatch (vendor-1661716520954.js:2:20737)
    at q.handle (vendor-1661716520954.js:2:18748)
    at Object.trigger (vendor-1661716520954.js:3:9787)
    at HTMLDocument.<anonymous> (vendor-1661716520954.js:3:10393)
    at Function.each (vendor-1661716520954.js:1:131884)
    at va.fn.init.each (vendor-1661716520954.js:1:130542)
    at va.fn.init.trigger (vendor-1661716520954.js:3:10368)
    at Object.trigger (script-1666808347529.js:21:22228)