- Issue created by @SirClickALot
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="["bottom", "top"]"
data-bs-delay="{"show":1000, "hide":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&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="{"show":1000, "hide":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
Active
Flag core