feat: add tooltip component

[laravdiemen]

Samen met javascript in brave-frontend-kit yardinternet/brave-frontend-kit#47.

Een voorbeeld hoe ik het nu heb toegepast:

@foreach ($facets as $facet)
	@php
		$explanation = $getFacetExplanation($facet['name']);
		$tooltipId = $prefix . '-facet-explanation-tooltip-' . $facet['name'];
		$tooltipTriggerId = $prefix . '-facet-explanation-tooltip-button-' . $facet['name'];
	@endphp
	<div class="{{ $class }}">
		<fieldset>
			<legend class="mb-3">
				<h3 class="text-h5 {{ $headingClass }} mb-0">
					{{ $facet['label'] }}
					@if ($explanation)
						<x-brave::tooltip.trigger :id="$tooltipTriggerId" :ariaDescribedby="$tooltipId" :aria-label="'Toelichting bij ' . $facet['label']">
							<i class="fa-light fa-circle-info" aria-hidden="true"></i>
						</x-brave::tooltip.trigger>
					@endif
				</h3>
			</legend>
			@if ($explanation)
				<x-brave::tooltip :id="$tooltipId"
					class="z-999 rounded-theme visible absolute hidden w-max max-w-[min(400px,calc(100%-2rem))] bg-white px-6 py-3 shadow-2xl"
					arrowClass="absolute size-4 rotate-45 bg-white">
					{{ $explanation }}
				</x-brave::tooltip>
			@endif
			{!! facetwp_display('facet', $facet['name']) !!}
		</fieldset>
	</div>
@endforeach

[github-actions]

Coverage report for commit: 71e8360
File: coverage.xml

Cover ┌─────────────────────────┐ Freq.
   0% │ ███████████████████████ │ 100.0%
  10% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  20% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  30% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  40% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  50% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  60% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  70% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  80% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  90% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
 100% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
      └─────────────────────────┘
 *Legend:* █ = Current Distribution 

Summary - Lines: - | Methods: -

Files	Lines	Methods	Branches
src/Components
Accordion.php	-	-	100.00%
BackButton.php	-	-	100.00%
Breadcrumb.php	-	-	100.00%
Dialog.php	-	-	100.00%
FeedbackForm.php	-	-	100.00%
ImgFocalPoint.php	-	-	100.00%
Nav.php	-	-	100.00%
PatternContent.php	-	-	100.00%
ReadSpeaker.php	-	-	100.00%
SocialIcon.php	-	-	100.00%
Tooltip.php	-	-	100.00%
src/Components/Breadcrumb
Crumb.php	-	-	100.00%
src
ComponentsServiceProvider.php	-	-	100.00%
src/Hooks
PatternContent.php	-	-	100.00%
ReadSpeaker.php	-	-	100.00%

_{🤖 comment via lucassabreu/comment-coverage-clover}

[Copilot]

Pull request overview

This PR adds a new Blade tooltip component to the brave component set, intended to be used together with JavaScript from brave-frontend-kit.

Changes:

• Register a new Tooltip view component in ComponentsServiceProvider.
• Add the Tooltip component class.
• Add Blade views for the tooltip container, trigger, and arrow subcomponents.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/ComponentsServiceProvider.php	Registers the new Tooltip component for Blade usage under the brave prefix.
src/Components/Tooltip.php	Adds a class-based Blade component that renders the tooltip view.
resources/views/components/tooltip/trigger.blade.php	Adds a trigger <button> component for tooltips.
resources/views/components/tooltip/index.blade.php	Adds the tooltip container markup and default attributes.
resources/views/components/tooltip/arrow.blade.php	Adds a small arrow subcomponent for tooltip styling/positioning.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

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,

[laravdiemen]

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

[YvetteNikolov]

Hehe prima zo

[Copilot]

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',

[laravdiemen]

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

[YvetteNikolov]

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.

[YvetteNikolov]

Super! Kun je in de README nog een simpel voorbeeld toevoegen?