[SOLVED] Pat-tooltip with styling?

Plone Support
1

is it possible to have styling in pat-tooltip?
By default, the tooltip text comes from 'title', but I want to add (one word) in bold for some tooltips.

For example: 'Click this button if you want to make a new document>'

Or do I need to have a custom javascript ?

PS the tooltips are on <a links

UPDATE: I dont know if it is a good idea, but I discovered that it is (also) possible to do (PS: Also check other script below):

$(document).ready(function () {
    $('.pat-tooltip').tooltip({
            html: true
    }); 
});

And then use html in the title attribute.
Not sure if it is a good idea, though

Probably, it is better to just skip 'pat', and do

$(document).ready(function () {
    $('.htmltooltip').each(function () {
        var tooltipContent = $(this).attr('data-tooltip-content'); // Get content from custom attribute
        $(this).tooltip({
            html: true,
            title: tooltipContent // Set tooltip content dynamically
        });
    });
});


<a href="${portal_url}/my-view" 
                class="htmltooltip"  
                data-tooltip-content="<b>Bold </b>notification">
2

The title attribute cannot be styled. How it is displayed is defined by the browser.

But maybe you can try one of the alternatives described in

or

3

Thanks, looking at it I found another possibility (?)
Since Plone 6 is 'bootstrap', it can be possible to do it like this (upside is that styling etc is the same as all the other tooltips:

<a href="/path/to/somewhere" 
    data-bs-toggle="tooltip" 
    data-tooltip-content="<b>Custom</b> tooltip content!">
Hover over me
</a>

<script>
$(document).ready(function () {
    $('[data-bs-toggle="tooltip"]').each(function () {
    var tooltipContent = $(this).attr('data-tooltip-content'); // Get content from custom attribute
    $(this).tooltip({
        html: true,
        title: tooltipContent // Set tooltip content dynamically
    });
    });
});
</script>