Bootstrap Tooltips not working on Flag links

Created on 21 December 2024, 17 days ago

Problem/Motivation

I have been using Flag for a very long time with great success and I thought it was time to update thje Flag links to give them Bootstrap 5 Tooltips.

I use Bootstrap 5 Tooltips extensively across the site and I trigger them to be added via the following JS code in my subtheme's custom.js file...

// Initialize Bootstrap5 tooltips.
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Although PHP Storm IDE doesn't seem to like that and splatters it with red squiggles, all seems to work fine.

I then add the tooltips to anchors using code like this...

<a href="/design/6897"
data-bs-toggle="tooltip"
data-bs-placement="left"
fallbackplacements="[&quot;bottom&quot;, &quot;top&quot;]"
data-bs-delay="{&quot;show&quot;:1000, &quot;hide&quot;:100}"
data-bs-html="true"
data-bs-title="Check the <b>learning outcomes coverage</b> and other <b>pedagogy</b> relating to the learning provided by this page."
data-bs-original-title="Check the skill coverage for the learning provided by this page.">Learning design</a>

This all works fine and I get BS Tooltips appear all over the site.

EXCEPT for when I apply exactly the same technique to Flag links (AJAX-powered of course).
Here is an example of the underlaying markup...

<a title="Add this page to your HOMEWORK list."
href="/flag/flag/my_homework_list/6897?destination=/tutorials/binary-numbers&amp;token=A8uPopr76QEeZqdAl6oSqET_-dLeeOlz-Kt9E91ZGUU"
class="use-ajax"
rel="nofollow"
data-bs-toggle="tooltip"
data-bs-offset="0,16"
data-bs-placement="bottom"
data-bs-html="true
 data-bs-delay="{&quot;show&quot;:1000, &quot;hide&quot;:100}"
data-bs-title="Add to your<br><b>HOMEWORK</b> list."
data-once="ajax">Add to HOMEWORK list</a>

Everything looks good but no Bootstrap Tooltips show.

My instinct is that this is something to do with the fact that the flags are AJAX-powered but I don't know how to deal with that.

Can anyone help here?

Thank you

💬 Support request
Status

Active

Component

Flag core

Created by

🇬🇧United Kingdom SirClickALot Somerset

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024