[manual] Build a custom header in Harmony

[erkki70]

This is remarkable and so useful, thanks a lot for for sharing!

@baris Is it ok to use the code below (I mean is it permitted?) in custom html and javascript to enable the tooltips on the icons as implemented here?
Thanks in advance!
Html

<a class="btn-ghost p-2" href="#" rel="noreferrer noopener" data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Twitter" data-bs-original-title="Twitter"><i style="color: #1DA1F2;" class="fa fa-2x fa-twitter-square"></i></a>

Javascript

if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', prepareFooter);
    } else {
        prepareFooter();
    }

    function prepareFooter() {
        
        $('[data-widget-area="brand-header"] [data-bs-toggle="tooltip"]').tooltip({
    trigger: 'hover'
});
        

        $(document).ready(function () {
            app.coldLoad();
        });
    }

[brazzerstop]

@erkki70 you can try this method to show tooltip without JS
https://community.nodebb.org/topic/17213/manual-build-a-dock-panel/3?_=1691498624448

[erkki70]

@brazzerstop Thank you for the pointer, I'll check it out!
And thank you for your awesome and very useful contributions, easy and comprehensive, well done!

[baris]

@erkki70 sure these are standard bootstrap tooltips. Feel free to use it.

[erkki70]

@baris Awesome, thank you!