Alpine custom tooltip directive darkmode with tippy.js

Question

Alpine custom tooltip directive darkmode with tippy.js

730 Views Asked by lordisp At 30 April 2022 at 23:33

I'm trying to implement the tippy.js tooltip and change the theme based on the local storage value darkMode as an AlpineJs custom directive.

The code below works more or less fine with the latest bit that if I toggle the dark-mode switch, which changes the local localStorage item value of darkMode, I need a page refresh to get the new value.

How can I get the value (JSON.parse(localStorage.getItem('darkMode'))) while I change it?

app.js

document.addEventListener('alpine:init', () => {
    Alpine.directive('tooltip', (el, {expression, modifiers}) => {
        tippy(el, {
            content: expression,
            placement: modifiers[0] ?? 'auto',
            theme: JSON.parse(localStorage.getItem('darkMode')) ?'blue':'light-border'
        })
    })
})

tool-tip button

<button type="button" x-tooltip.left="I'm a tooltip">Hover me</button>

darkmode

<body class="font-sans antialiased h-full"
      x-data="{'darkMode': false}"
      x-init="
        darkMode = JSON.parse(localStorage.getItem('darkMode'));
        $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))"
      x-cloak
>
<!-- some html -->
</body>

toggle button

<input id="toggle" type="checkbox"  :value="darkMode" @change="darkMode = !darkMode"/>

Original Q&A

There are 1 best solutions below

**Dauros** · Accepted Answer · 2022-05-01T10:43:10.353000

As you see a Tippy.js instance and the localStorage is not reactive. After creating a Tippy.js instance we need to use the _tippy property on each element if we want to change a property. To make it a little bit easier, I modified the tooltip directive to add a custom class tooltips, that we use to loop over each Tippy.js instance.

document.addEventListener('alpine:init', () => {
  Alpine.directive('tooltip', (el, { expression, modifiers }) => {
    tippy(el, {
      content: expression,
      placement: modifiers[0] ?? 'auto',
      theme: JSON.parse(localStorage.getItem('darkMode')) ? 'blue' : 'light-border'
    })
    el.classList.add('tooltips')
  })
})

And in the $watch magic, we use the tooltips class to find all of the Tippy.js instances and set the new theme on them.

<body class="font-sans antialiased h-full"
      x-data="{'darkMode': false}"
      x-init="
        darkMode = JSON.parse(localStorage.getItem('darkMode'));
        $watch('darkMode', value => {
            localStorage.setItem('darkMode', JSON.stringify(value))
            Array.from(document.querySelectorAll('.tooltips')).forEach(
              el => el._tippy.setProps({ theme: value ? 'blue' : 'light-border' }))
        })"
      x-cloak
>
<!-- some html -->
</body>

Alpine custom tooltip directive darkmode with tippy.js

app.js

tool-tip button

darkmode

toggle button

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ALPINE.JS

Related Questions in TIPPYJS

Trending Questions

Popular # Hahtags

Popular Questions