PHPackages                             miladkermanji/livewire-tooltip - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. miladkermanji/livewire-tooltip

ActiveLibrary[Utility & Helpers](/categories/utility)

miladkermanji/livewire-tooltip
==============================

A Livewire component for displaying tooltips with Popper.js, supporting static and dynamic content.

10PHP

Since Apr 26Pushed 1y ago1 watchersCompare

[ Source](https://github.com/miladkermaji/miladkermanji-livewire-tooltip)[ Packagist](https://packagist.org/packages/miladkermanji/livewire-tooltip)[ RSS](/packages/miladkermanji-livewire-tooltip/feed)WikiDiscussions main Synced today

READMEChangelog (1)DependenciesVersions (1)Used By (0)

Livewire Tooltip
================

[](#livewire-tooltip)

A lightweight Laravel package that provides a Livewire component for displaying tooltips using Popper.js. It supports both static tooltips via `data-tooltip` and dynamic content via `tooltip-method`, with smooth fade-in/fade-out animations.

---

Features
--------

[](#features)

- **Static Tooltips**: Display simple text tooltips using `data-tooltip`.
- **Dynamic Tooltips**: Fetch content from Livewire methods using `tooltip-method`.
- **Smooth Animations**: 300ms fade-in/fade-out transitions.
- **Livewire Compatible**: Works seamlessly with Livewire updates.
- **Prevent Empty Tooltips**: Ensures only valid tooltips are shown.
- **Customizable**: Configure placement and animation duration.
- **Lightweight**: Minimal footprint with no unnecessary dependencies.

---

Requirements
------------

[](#requirements)

- PHP 8.1 or higher
- Laravel 10.0, 11.0, or 12.0
- Livewire 3.0 or higher
- Popper.js (via CDN or npm)

---

Installation
------------

[](#installation)

1. **Install the Package**

    Install the package via Composer:

    ```
    composer require miladkermanji/livewire-tooltip
    ```
2. **Add Popper.js**

    Include Popper.js in your Laravel layout (e.g., `resources/views/layouts/app.blade.php`) before the closing `` tag:

    ```

    ```

    Alternatively, if using npm:

    ```
    npm install @popperjs/core
    ```

    Then import it in your JavaScript file (e.g., `resources/js/app.js`):

    ```
    import Popper from '@popperjs/core';
    window.Popper = Popper;
    ```
3. **Register the Tooltip Component**

    Add the Livewire component to your layout or specific view (e.g., `resources/views/layouts/app.blade.php` or `resources/views/livewire/dr/panel/turn/schedule/appointments-list.blade.php`):

    ```

    ```
4. **Clear Cache (Optional)**

    Clear Laravel caches to ensure smooth integration:

    ```
    php artisan cache:clear
    php artisan config:clear
    php artisan view:clear
    composer dump-autoload
    ```

---

Usage
-----

[](#usage)

### Static Tooltips

[](#static-tooltips)

Add the `tooltip-link` class and `data-tooltip` attribute to any HTML element:

```

    Hover me

```

### Dynamic Tooltips

[](#dynamic-tooltips)

Use the `tooltip-method` attribute to call a Livewire method for dynamic content:

```

    Dynamic Tooltip

```

In your Livewire component (e.g., `app/Livewire/MyComponent.php`):

```
namespace App\Livewire;

use Livewire\Component;

class MyComponent extends Component
{
    public function getTooltipContent($param1)
    {
        return "Dynamic content: $param1";
    }

    public function render()
    {
        return view('livewire.my-component');
    }
}
```

### Example in a Real Project

[](#example-in-a-real-project)

In `resources/views/livewire/dr/panel/turn/schedule/appointments-list.blade.php`, you can use the tooltip for action buttons:

```
status === 'cancelled' || $appointment->status === 'attended' ? 'disabled' : '' }}>

status === 'cancelled' || $appointment->status === 'attended' ? 'disabled' : '' }}>

```

---

Configuration
-------------

[](#configuration)

You can publish the configuration file to customize default settings:

```
php artisan vendor:publish --tag=livewire-tooltip-config
```

This will create a `config/livewire-tooltip.php` file with the following defaults:

```