Deprecated: Return type of Illuminate\Support\Collection::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2060

Deprecated: Return type of Illuminate\Support\Collection::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2071

Deprecated: Return type of Illuminate\Support\Collection::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2083

Deprecated: Return type of Illuminate\Support\Collection::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2098

Deprecated: Return type of Illuminate\Support\Collection::count() should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2007

Deprecated: Return type of Illuminate\Support\Collection::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1986

Deprecated: Return type of Illuminate\Support\Collection::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1955
Helsingborg Styleguide - Version 2.0

Tooltip

Tooltip

Bottom
Top
Right
Left
A implementation of data-tooltip (long). A implementation of data-tooltip (short). 
<div class="c-tooltip c-tooltip--bottom c-tooltip--hidden" original-placement="c-tooltip--bottom" id="id_6916252c98dc4" data-uid="6916252c98dc4">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c98dc4">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c98e4a">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c98fa0">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c98dc4">
             
            <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="id_6916252c98ff1" data-uid="6916252c98ff1">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c98ff1">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c9902c">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c99068">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c98ff1">
             
            <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="id_6916252c990a2" data-uid="6916252c990a2">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c990a2">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c990d5">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c9910b">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c990a2">
             
            <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="id_6916252c99142" data-uid="6916252c99142">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c99142">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c99173">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c991a8">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c99142">
             
            <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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Tooltip/tooltip.json

Tooltip

Bottom
Top
Right
Left
A implementation of data-tooltip (long). A implementation of data-tooltip (short). 
<div class="c-tooltip c-tooltip--bottom c-tooltip--hidden" original-placement="c-tooltip--bottom" id="id_6916252c99876" data-uid="6916252c99876">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c99876">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c998b1">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c998ec">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c99876">
             
            <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="id_6916252c99927" data-uid="6916252c99927">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c99927">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c99958">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c9998c">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c99927">
             
            <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="id_6916252c999c3" data-uid="6916252c999c3">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c999c3">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c999f2">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c99a25">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c999c3">
             
            <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="id_6916252c99a5a" data-uid="6916252c99a5a">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="6916252c99a5a">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="6916252c99a89">
    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" data-material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6916252c99abb">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="6916252c99a5a">
             
            <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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Tooltip/tooltip.json