Tooltips for mobile

[whiztech]

I'm interested on having mobile tooltips for the icons in revision module in case a visitor can't guess what the icons are representing. This is useful for Abbreviations Shortcode too.

What would be the best way to do this? Because this module is based on Bootstrap, I thought of just using Bootstrap's tooltips:

Thank you.

[razonyang]

I don't have an ideal solution yet, since it will import new JS, I don't think everyone like/need it.

Using JS API to dynamic generate tooltips elements would be a workaround, something like.

import Tooltip from "js/bootstrap/src/tooltip"

const elements = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

elements.push(...document.querySelectorAll('abbr'))

elements.forEach((ele) => {
  new Tooltip(ele)
})

[razonyang]

I've an idea few weeks ago, just got time to do it, github.com/hbstack/revision@v0.4.0 now automatically using tooltip if github.com/hbstack/bs-tooltip module was deteced, that mean, you'll need to import the tooltip module to tooltip revision titles. It won't affect users whose don't want to use Bootstrap tooltip.

[razonyang]

To use Bootstrap tooltip on <abbr>, you can import the github.com/hbstack/bs-tooltip/modules/abbr module.