Tippy Tooltip - New Layouts - Secondary Menu

[SafetyUniversity]

Greetings all-

If others could test the following script, I would be appreciative to see if it works across all apps.

The intent is to provide tooltips for the new layout’s secondary menu.

Add the following to the App Settings > Custom Header/Footer Code > Footer:

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

To obtain selector for secondary menu item, access your developer section of browser and “inspect” then “copy selector”.

Add the following code to the Layout Javascript tab:

function applyTooltip(selector, content) {
    const element = document.querySelector(selector);
    if (element) {
        tippy(element, {
            content: content,
            trigger: 'mouseenter', // Change to 'focus' if needed
            placement: 'right',
            arrow: true,
            animation: 'fade',
        });
    } else {
        setTimeout(() => applyTooltip(selector, content), 100);
    }
}

// Applying tooltips to multiple elements
applyTooltip('#layout_floating > div > div > aside > div > div > ul > li:nth-child(1)', 'Security');
applyTooltip('#layout_floating > div > div > aside > div > div > ul > li:nth-child(2)', 'Emergency Management/Business Continuity');
applyTooltip('#layout_floating > div > div > aside > div > div > ul > li:nth-child(3)', 'After Action Reports (AARs)');

The end result should look like this:

Any confirmation would be appreciated or if there is a more concise/less lines of code that could be used. This was developed by trail and error using ChatGPT.

NOTE: there are limitations to this current setup. If you have dynamic links that show/hide based on roles, it could result in incorrect results.
~ Adam

[Shumon]

give me the exact codes for this and I will test and let you know the result. Standard Model

[SafetyUniversity]

Hi @Shumon -

The code is all above.

-Adam

[Shumon]

@SafetyUniversity

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

Hi Adam, I can confirm your codes do work. Screenshot and link are attached for your attention. Only useful for ‘Floating’ layout in PC mode on mouse hover over event plus any new menu items would need coding in… right? All that effort just to get tooltips… or perhaps that is the very point you are conveying to the tb community beucase it should be a standard/optional feature for the Floating layout.

Link: Standard Model

[SafetyUniversity]

You are correct, that any additions or deletes would require updated coding. I am sure that the TB team is working on something similar for the layouts. This was intended to be an interim option for the Community members to use.

Thanks for checking and confirming it works for you.

Cheers,
Adam

[Ashley]

Works great for me, so a big thankyou. Has anyone tried to generate code for the notifaction counter? I´ve been trying with chatGPT for a few hours but to no avail, i´ve generated a post if anyone is interested.

Code for Notification Badge on new Layout Menu

[image] If anyone has the ability to generate/correct some javascript code to replace the notification badge number with the number of records in a table (with one or more conditions preferably). Ive spent a couple of hours with chat gpt to no avail. If i´m not mistaken the code should call the records with a condition from the datatable using the ollowing API script: var myHeaders = new Headers(); myHeaders.append(“X-Tadabase-App-id”, “{{appId}}”); myHeaders.append(“X-Tadabase-App-Key”, “{…

[Shumon]

good topic @Ashley. Im glad youve raised this one and I hope tb community can get a working example solution soon.

[Shumon]

How did you do your animation? I dont to know how to do PC screen recording. I want to do a demo on video so I can share my thoughts.

[SafetyUniversity]

@Ashley - I just posted a video showing what I have done for the notification counter in your original posting.

Adam

[SafetyUniversity]

I use SnagIt and ScreenCast for my short videos on the TB Community board. They are simple and easy to use. Not a lot of “bells and whistles” which is sufficient for the Community Board.

Adam