Tooltip
Tooltip
Bottom
Top
Right
Left
<div class="c-tooltip c-tooltip--bottom c-tooltip--hidden" original-placement="c-tooltip--bottom" id="682b26c0a2904" data-uid="682b26c0a2904">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a2904">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a296f">
Bottom
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a2a87">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a2904">
<div class="c-tooltip__content">
Bottom tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<div class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="682b26c0a2ad8" data-uid="682b26c0a2ad8">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a2ad8">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a2b11">
Top
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a2b4c">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a2ad8">
<div class="c-tooltip__content">
Top tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<div class="c-tooltip c-tooltip--right c-tooltip--hidden" original-placement="c-tooltip--right" id="682b26c0a2b94" data-uid="682b26c0a2b94">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a2b94">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a2bc7">
Right
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a2bfe">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a2b94">
<div class="c-tooltip__content">
Right tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<div class="c-tooltip c-tooltip--left c-tooltip--hidden" original-placement="c-tooltip--left" id="682b26c0a2c35" data-uid="682b26c0a2c35">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a2c35">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a2c65">
Left
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a2c99">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a2c35">
<div class="c-tooltip__content">
Left tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<a href="#" class="c-tooltip" data-tooltip="Tooltip text that is longer than before, this may very well overflow.">A implementation of data-tooltip (long).</a>
<a href="#" class="c-tooltip" data-tooltip="Tooltip text.">A implementation of data-tooltip (short).</a>@tooltip([
'label' => 'Bottom',
'icon' => 'info',
'placement' => 'bottom',
])
Bottom tooltip
@endtooltip
@tooltip([
'label' => 'Top',
'icon' => 'info',
'placement' => 'top',
])
Top tooltip
@endtooltip
@tooltip([
'label' => 'Right',
'icon' => 'info',
'placement' => 'right',
])
Right tooltip
@endtooltip
@tooltip([
'label' => 'Left',
'icon' => 'info',
'placement' => 'left',
])
Left tooltip
@endtooltip
<a href="#" class="c-tooltip" data-tooltip="Tooltip text that is longer than before, this may very well overflow.">A implementation of data-tooltip (long).</a>
<a href="#" class="c-tooltip" data-tooltip="Tooltip text.">A implementation of data-tooltip (short).</a>Blade component parameters
| Key | Default value | Type | Available values | Description |
| componentElement | div | string | - | What element to wrap this component with. |
| typographyElement | strong | string | - | What element to wrap the label with. |
| placement | bottom | string | - | Selects the placement of the tooltip |
| icon | info | string | - | Name of the icon, alternatively false |
| iconSize | md | string | - | Size of the icon |
| label | false | boolean | - | Label of the tooltip, alternatively false |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |
Tooltip
Bottom
Top
Right
Left
<div class="c-tooltip c-tooltip--bottom c-tooltip--hidden" original-placement="c-tooltip--bottom" id="682b26c0a32fe" data-uid="682b26c0a32fe">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a32fe">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a3341">
Bottom
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a3382">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a32fe">
<div class="c-tooltip__content">
Bottom tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<div class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="682b26c0a33c0" data-uid="682b26c0a33c0">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a33c0">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a33ff">
Top
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a3434">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a33c0">
<div class="c-tooltip__content">
Top tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<div class="c-tooltip c-tooltip--right c-tooltip--hidden" original-placement="c-tooltip--right" id="682b26c0a346a" data-uid="682b26c0a346a">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a346a">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a3498">
Right
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a34cc">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a346a">
<div class="c-tooltip__content">
Right tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<div class="c-tooltip c-tooltip--left c-tooltip--hidden" original-placement="c-tooltip--left" id="682b26c0a3500" data-uid="682b26c0a3500">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="682b26c0a3500">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="682b26c0a352d">
Left
</strong> <!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b26c0a3560">
</span>
<div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="682b26c0a3500">
<div class="c-tooltip__content">
Left tooltip
</div>
<span class="c-tooltip__arrow"></span>
</div>
</div>
</div>
<a href="#" class="c-tooltip" data-tooltip="Tooltip text that is longer than before, this may very well overflow.">A implementation of data-tooltip (long).</a>
<a href="#" class="c-tooltip" data-tooltip="Tooltip text.">A implementation of data-tooltip (short).</a>@tooltip([
'label' => 'Bottom',
'icon' => 'info',
'placement' => 'bottom',
])
Bottom tooltip
@endtooltip
@tooltip([
'label' => 'Top',
'icon' => 'info',
'placement' => 'top',
])
Top tooltip
@endtooltip
@tooltip([
'label' => 'Right',
'icon' => 'info',
'placement' => 'right',
])
Right tooltip
@endtooltip
@tooltip([
'label' => 'Left',
'icon' => 'info',
'placement' => 'left',
])
Left tooltip
@endtooltip
<a href="#" class="c-tooltip" data-tooltip="Tooltip text that is longer than before, this may very well overflow.">A implementation of data-tooltip (long).</a>
<a href="#" class="c-tooltip" data-tooltip="Tooltip text.">A implementation of data-tooltip (short).</a>Blade component parameters
| Key | Default value | Type | Available values | Description |
| componentElement | div | string | - | What element to wrap this component with. |
| typographyElement | strong | string | - | What element to wrap the label with. |
| placement | bottom | string | - | Selects the placement of the tooltip |
| icon | info | string | - | Name of the icon, alternatively false |
| iconSize | md | string | - | Size of the icon |
| label | false | boolean | - | Label of the tooltip, alternatively false |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |