How do I create tooltip?

Questions
, ,
1

I’m attempting to add tooltip to table headings to help user with entering data.

Something that worked, but I’m not 100% sure if i’m using it how it is meant to be used:

$ = skuid.runtime.getPage(<pageName>).$
skuid.runtime.getPage(<pageName>).utils._floatingComponentFactory.createTooltip(
    $('#colTest')[0],
    {
        text: "Test 12345",
        compact: true,
        position: "top",
        useTransition: false,
        delay: 750
    },
    skuid.runtime.getPage(<pageName>).$C(<tableId>)

);

I’m especially unsure about the 3rd parameter. The function is requiring me to to provide it, so it can subscribe to it. I would like to know why?
Also, the function accepts 4th parameter, but I’m not sure what would go there and why would I want to provide it.
Also, is there a way for me to breaklines in the text?
Note: $('#colTest') is <th> tag of table.

I have also tried setting title attribute of a tag, and it does produce a tooltip. Though, the styling is not consistent.

I am welcome to other suggestions. Preferably I am able to breaklines, and can control the styling.

Thank you,
Lukas

2

Hey @lukaspovilonis,

Good seeing you around. Taking a look at it now, and I will let you know once I have an answer!

Cheers,

3

Hey @lukaspovilonis,

I just talked to the team, and the API you are calling isn’t supported for customer use. For future reference, if the call you’re making starts with an: _ You shouldn’t use it since it’s for internal usage.

You would have to use HTML as an alternative solution to creating a custom toolkit for your table.

Side note:
It is something worth looking into on our end since it’s an interesting use case. If you want, you should suggest it in the #ideas channel!

4

Thank you @QuinnRyan, I understand and will make sure to not use it.

For any one interested, I just added a listener for click event on table column header which shows a modal on click.
I found this in the forum, but just thought I would bring it up here as well as I believe it can be powerful:

skuid.actionSequences.getByName(<actionSequenceName>).run(<inputParamaters>, <context>)

If you set: context = {model, row} , then the modal will be able to pick up the context.

Best,
Lukas

1 Like
5

Wow that’s super clever @lukaspovilonis, thanks for sharing the workaround!

One thing you should be cautious of is that this could possibly break since V2 is still under active development and could change in the next release.

From SF:
https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_ui_testing.htm&type=5&release=234

“The content and structure of HTML, CSS, and the DOM can change at any time and can’t be considered a stable API.”

So in the meantime, I will submit this to the team as something that should be considered for the next(or future) release.

If I hear anything I will post here.

Cheers,

1 Like