Alpine tooltip darkmode #2895

lordisp · 2022-04-30T23:34:44Z

lordisp
Apr 30, 2022

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"/>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Alpine tooltip darkmode #2895

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Alpine tooltip darkmode #2895

Uh oh!

lordisp Apr 30, 2022

app.js

tool-tip button

darkmode

toggle button

Replies: 0 comments

lordisp
Apr 30, 2022