Skip to content

feat: add tooltip component #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
laravdiemen merged 1 commit into from
Apr 20, 2026
Merged

feat: add tooltip component #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 42 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

```
Expand Down Expand Up @@ -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/)
12 changes: 12 additions & 0 deletions resources/views/components/tooltip/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@props(['id', 'arrowClass' => ''])

<div
{{ $attributes->merge([
'id' => $id,
'role' => 'tooltip',
'aria-hidden' => 'true',

Copilot AI Apr 20, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-hidden defaults to true on the tooltip element, but this element is intended to be referenced via aria-describedby from the trigger. Content referenced by ARIA relationships should not be hidden from assistive technologies, otherwise many screen readers will ignore the description. Consider removing the hard-coded aria-hidden default (or default it to false and let JS/consumers toggle it when the tooltip is actually hidden/visible).

Suggested change
'aria-hidden' => 'true',

Copilot uses AI. Check for mistakes.

@laravdiemen laravdiemen Apr 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmmm, @YvetteNikolov wat vind jij? Ik zou denken dat een tooltip altijd standaard verborgen is. Misschien dan de hidden class default toevoegen?

@YvetteNikolov YvetteNikolov Apr 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ik vind dit genitpick door copilot. En ik ben geen fan van Tailwind classes toevoegen, hou het liever framework agnostisch. Van mij mag je deze comment negeren.

'class' => 'js-brave-tooltip',
]) }}>
{{ $slot }}
<div @class(['js-brave-tooltip-arrow', $arrowClass])></div>
</div>
11 changes: 11 additions & 0 deletions resources/views/components/tooltip/trigger.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@props(['id', 'ariaDescribedby'])

<button
{{ $attributes->merge([
'id' => $id,
'type' => 'button',
'class' => 'js-brave-tooltip-trigger',
'aria-describedby' => $ariaDescribedby,
Comment on lines +1 to +8

Copilot AI Apr 20, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The prop name ariaDescribedby is inconsistent with the camelCase style used elsewhere (e.g. ariaLabel in other components). Consider renaming it to ariaDescribedBy (and update the merge mapping) so multi-word props follow the same casing and are easier to use consistently from Blade.

Suggested change
@props(['id', 'ariaDescribedby'])
<button
{{ $attributes->merge([
'id' => $id,
'type' => 'button',
'class' => 'js-brave-tooltip-trigger',
'aria-describedby' => $ariaDescribedby,
@props(['id', 'ariaDescribedBy'])
<button
{{ $attributes->merge([
'id' => $id,
'type' => 'button',
'class' => 'js-brave-tooltip-trigger',
'aria-describedby' => $ariaDescribedBy,

Copilot uses AI. Check for mistakes.

@laravdiemen laravdiemen Apr 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Het is ook aria-describedby en niet aria-described-by dus ik vond het eigenlijk wel consistent zo.

@YvetteNikolov YvetteNikolov Apr 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hehe prima zo

]) }}>
{{ $slot }}
</button>
17 changes: 17 additions & 0 deletions src/Components/Tooltip.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
}
}
16 changes: 15 additions & 1 deletion src/ComponentsServiceProvider.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
Loading