README

A lightweight Magento 2 module to easily display tooltips in your Hyvä Theme.

Built on top of Floating UI, preconfigured and styled for common e-commerce use cases.

Installation

composer require blackbird/hyva-tooltip

php bin/magento setup:upgrade

This module depends on blackbird/external-resources-loader to automatically load the Floating UI library.

Usage

You can initialize the tooltip in different ways, depending on your needs:

<button id="button-<?= $uniqueId ?>"
        x-data="blackbird.tooltip({
            tooltipSelector: '#tooltip-<?= $uniqueId ?>',
        })"
>
    My button
</button>

<div id="tooltip-<?= $uniqueId ?>" blackbird-tooltip>My tooltip</div>

<button id="button-<?= $uniqueId ?>">My button</button>

<div id="tooltip-<?= $uniqueId ?>"
     blackbird-tooltip
     x-data="blackbird.tooltip({
         buttonSelector: '#button-<?= $uniqueId ?>',
     })"
>
    My tooltip
</div>

<div x-data="blackbird.tooltip({
         buttonSelector: '#button-<?= $uniqueId ?>',
         tooltipSelector: '#tooltip-<?= $uniqueId ?>',
     })">
</div>

<button id="button-<?= $uniqueId ?>">My button</button>
<div id="tooltip-<?= $uniqueId ?>" blackbird-tooltip>My tooltip</div>

Custom styling

You can override the tooltip style using Tailwind’s @layer utilities syntax:

@layer utilities {
    [blackbird-tooltip] {
        @apply bg-gray-light;
    }
}

Made for Hyvä. Simple, ready-to-use, and flexible. 🎉