PHPackages                             5balloons/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. 5balloons/livewire-tooltip

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

5balloons/livewire-tooltip
==========================

A dynamic tooltip component using laravel livewire

v2.2.1(1y ago)83.9k[1 issues](https://github.com/5balloons/livewire-tooltip/issues)MITPHPPHP ^8.0

Since Feb 15Pushed 1y ago3 watchersCompare

[ Source](https://github.com/5balloons/livewire-tooltip)[ Packagist](https://packagist.org/packages/5balloons/livewire-tooltip)[ RSS](/packages/5balloons-livewire-tooltip/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (8)Dependencies (6)Versions (9)Used By (0)

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

[](#livewire-tooltip)

A dynamic, easy-to-use tooltip component for Laravel Livewire, enabling developers to add interactive tooltips to their Laravel applications with minimal effort.

Features
--------

[](#features)

- Dynamic content loading via Livewire
- Customizable tooltip positioning with Popper.js
- Easy integration with any Laravel project
- Support for HTML content and asynchronous data fetching

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

[](#installation)

To install the package, run the following command in your terminal:

```
composer require 5balloons/livewire-tooltip
```

Usage
-----

[](#usage)

To use the `LivewireTooltip` component in your Livewire views, you need to follow below steps

### Install PooperJs

[](#install-pooperjs)

You can either install PopperJS via npm , or simply include the below CDN file in your layout file head element.

```

```

### Include Tooltip component in your view / layout

[](#include-tooltip-component-in-your-view--layout)

Include the tooltip component in your view file where you want to have the dynamic tooltip implemented, or you can include it in your layout file if you intend to have tooltips across your application

```

```

### Tooltip Elements

[](#tooltip-elements)

Example of a link that triggers the tooltip:

```
Hover me

```

To implement the dynamic tooltip functionality, you need to define a method named `tooltip` in your controller. This method should return either a string or a view file that contains the content to be displayed in the tooltip.

Here's an example of how you can define the `tooltip` method in your controller:

```
public function tooltip()
{
    // Your code here to generate the tooltip content
    return 'This is the tooltip content';
}
```

Make sure to replace `'This is the tooltip content'` with the actual content you want to display in the tooltip.

Once you have defined the `tooltip` method, you can use it in your view by adding the `tooltip-method` attribute to the tooltip link element, like this:

```
Hover me
```

Remember to replace `\App\Http\Controllers\YourController` with the actual namespace and class name of your controller.

That's it! Now when the user hovers over the tooltip link, the `tooltip` method will be invoked and the returned content will be displayed in the tooltip.

The tooltip method can either return a String or a View file. Tooltip component should be able to parse the dynamic variables and render the content inside tooltip

Advanced Usage
--------------

[](#advanced-usage)

For dynamic content loading and custom positioning:

```
Hover for dynamic content

```

You can pass parameters to the method and specify the tooltip position as given in the above example

License
-------

[](#license)

This package is open-sourced software licensed under the MIT license.

###  Health Score

33

—

LowBetter than 72% of packages

Maintenance39

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 83.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~55 days

Recently: every ~79 days

Total

8

Last Release

479d ago

Major Versions

v1.0.3 → v2.0.02024-08-02

### Community

Maintainers

![](https://www.gravatar.com/avatar/beec29b4bc95b2150d260efe5763f21fa95d394005ca1b1e46491fc2d30b32bb?d=identicon)[5balloons](/maintainers/5balloons)

---

Top Contributors

[![tushargugnani](https://avatars.githubusercontent.com/u/5244323?v=4)](https://github.com/tushargugnani "tushargugnani (10 commits)")[![5balloons](https://avatars.githubusercontent.com/u/33449629?v=4)](https://github.com/5balloons "5balloons (2 commits)")

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/5balloons-livewire-tooltip/health.svg)

```
[![Health](https://phpackages.com/badges/5balloons-livewire-tooltip/health.svg)](https://phpackages.com/packages/5balloons-livewire-tooltip)
```

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9527.8M128](/packages/livewire-flux)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

725173.2k14](/packages/tallstackui-tallstackui)[psalm/plugin-laravel

Psalm plugin for Laravel

3355.3M346](/packages/psalm-plugin-laravel)[venturedrake/laravel-crm

A free open source CRM built as a package for laravel projects

43311.2k](/packages/venturedrake-laravel-crm)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)[noerd/noerd

101.4k6](/packages/noerd-noerd)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)