From 71e8360a2818ba8bbc8943a4c2b9f3026d0b6453 Mon Sep 17 00:00:00 2001
From: Lara van Diemen <lara@yard.nl>
Date: Mon, 20 Apr 2026 10:32:19 +0200
Subject: [PATCH] feat: add tooltip component

---
 README.md                                     | 71 +++++++++++--------
 .../views/components/tooltip/index.blade.php  | 12 ++++
 .../components/tooltip/trigger.blade.php      | 11 +++
 src/Components/Tooltip.php                    | 17 +++++
 src/ComponentsServiceProvider.php             | 16 ++++-
 5 files changed, 97 insertions(+), 30 deletions(-)
 create mode 100644 resources/views/components/tooltip/index.blade.php
 create mode 100644 resources/views/components/tooltip/trigger.blade.php
 create mode 100644 src/Components/Tooltip.php

diff --git a/README.md b/README.md
index f3162eb..9da054a 100644
--- a/README.md
+++ b/README.md
@@ -132,35 +132,35 @@ Example usage with Navi:
 @php($menu = \Log1x\Navi\Navi::make()->build('primary_navigation'))
 
 @if ($menu->isNotEmpty())
-	<x-brave::nav aria-label="{{ __('Primaire navigatie', 'sage') }}">
-		<x-brave::nav.list>
-			@foreach ($menu->all() as $item)
-				<x-brave::nav.item class="group">
-					<x-brave::nav.link :item="$item" class="text-blue-500" activeClass="text-red-500">
-						{!! $item->label !!}
-						@if ($item->children)
-							<i class="fa-light fa-chevron-down"></i>
-						@endif
-					</x-brave::nav.link>
-
-					@if ($item->children)
-						<x-brave::nav.dropdown mode="hover" @class([
-							'invisible absolute bg-white',
-							'group-has-aria-expanded:visible',
-						])>
-							@foreach ($item->children as $child)
-								<x-brave::nav.item>
-									<x-brave::nav.link :item="$child" class="text-blue-500" activeClass="text-red-500">
-										{!! $child->label !!}
-									</x-brave::nav.link>
-								</x-brave::nav.item>
-							@endforeach
-						</x-brave::nav.dropdown>
-					@endif
-				</x-brave::nav.item>
-			@endforeach
-		</x-brave::nav.list>
-	</x-brave::nav>
+    <x-brave::nav aria-label="{{ __('Primaire navigatie', 'sage') }}">
+        <x-brave::nav.list>
+            @foreach ($menu->all() as $item)
+                <x-brave::nav.item class="group">
+                    <x-brave::nav.link :item="$item" class="text-blue-500" activeClass="text-red-500">
+                        {!! $item->label !!}
+                        @if ($item->children)
+                            <i class="fa-light fa-chevron-down"></i>
+                        @endif
+                    </x-brave::nav.link>
+
+                    @if ($item->children)
+                        <x-brave::nav.dropdown mode="hover" @class([
+                            'invisible absolute bg-white',
+                            'group-has-aria-expanded:visible',
+                        ])>
+                            @foreach ($item->children as $child)
+                                <x-brave::nav.item>
+                                    <x-brave::nav.link :item="$child" class="text-blue-500" activeClass="text-red-500">
+                                        {!! $child->label !!}
+                                    </x-brave::nav.link>
+                                </x-brave::nav.item>
+                            @endforeach
+                        </x-brave::nav.dropdown>
+                    @endif
+                </x-brave::nav.item>
+            @endforeach
+        </x-brave::nav.list>
+    </x-brave::nav>
 @endif
 
 ```
@@ -203,6 +203,19 @@ Usage without Navi:
 </x-brave::nav>
 ```
 
+### Tooltip
+
+Usage:
+
+```blade
+<x-brave::tooltip.trigger id="my-tooltip-trigger" ariaDescribedby="my-tooltip">
+    Hover or focus me
+</x-brave::tooltip.trigger>
+<x-brave::tooltip id="my-tooltip">
+    This is the tooltip content.
+</x-brave::tooltip>
+```
+
 ## About us
 
 [![banner](https://raw.githubusercontent.com/yardinternet/.github/refs/heads/main/profile/assets/small-banner-github.svg)](https://www.yard.nl/werken-bij/)
diff --git a/resources/views/components/tooltip/index.blade.php b/resources/views/components/tooltip/index.blade.php
new file mode 100644
index 0000000..0648904
--- /dev/null
+++ b/resources/views/components/tooltip/index.blade.php
@@ -0,0 +1,12 @@
+@props(['id', 'arrowClass' => ''])
+
+<div
+    {{ $attributes->merge([
+        'id' => $id,
+        'role' => 'tooltip',
+        'aria-hidden' => 'true',
+        'class' => 'js-brave-tooltip',
+    ]) }}>
+    {{ $slot }}
+    <div @class(['js-brave-tooltip-arrow', $arrowClass])></div>
+</div>
diff --git a/resources/views/components/tooltip/trigger.blade.php b/resources/views/components/tooltip/trigger.blade.php
new file mode 100644
index 0000000..73ec03a
--- /dev/null
+++ b/resources/views/components/tooltip/trigger.blade.php
@@ -0,0 +1,11 @@
+@props(['id', 'ariaDescribedby'])
+
+<button
+    {{ $attributes->merge([
+        'id' => $id,
+        'type' => 'button',
+        'class' => 'js-brave-tooltip-trigger',
+        'aria-describedby' => $ariaDescribedby,
+    ]) }}>
+    {{ $slot }}
+</button>
diff --git a/src/Components/Tooltip.php b/src/Components/Tooltip.php
new file mode 100644
index 0000000..9805ca2
--- /dev/null
+++ b/src/Components/Tooltip.php
@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yard\Brave\Components;
+
+use Illuminate\Contracts\View\Factory;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class Tooltip extends Component
+{
+	public function render(): Factory|View
+	{
+		return view('brave::components.tooltip.index');
+	}
+}
diff --git a/src/ComponentsServiceProvider.php b/src/ComponentsServiceProvider.php
index 208f442..9e47cd9 100644
--- a/src/ComponentsServiceProvider.php
+++ b/src/ComponentsServiceProvider.php
@@ -16,6 +16,7 @@
 use Yard\Brave\Components\PatternContent;
 use Yard\Brave\Components\ReadSpeaker;
 use Yard\Brave\Components\SocialIcon;
+use Yard\Brave\Components\Tooltip;
 use Yard\Hook\Registrar;
 
 class ComponentsServiceProvider extends PackageServiceProvider
@@ -26,7 +27,20 @@ public function configurePackage(Package $package): void
 			->name('components')
 			->hasConfigFile()
 			->hasViews('brave')
-			->hasViewComponents('brave', Accordion::class, BackButton::class, Breadcrumb::class, Dialog::class, FeedbackForm::class,  ImgFocalPoint::class, Nav::class, PatternContent::class, ReadSpeaker::class, SocialIcon::class);
+			->hasViewComponents(
+				'brave',
+				Accordion::class,
+				BackButton::class,
+				Breadcrumb::class,
+				Dialog::class,
+				FeedbackForm::class,
+				ImgFocalPoint::class,
+				Nav::class,
+				PatternContent::class,
+				ReadSpeaker::class,
+				SocialIcon::class,
+				Tooltip::class
+			);
 	}
 
 	public function packageBooted(): void