Tooltip

Tooltip

Bottom
Top
Right
Left
A implementation of data-tooltip 
<div class="c-tooltip c-tooltip--bottom c-tooltip--hidden" original-placement="c-tooltip--bottom" id="67b781076d05d" data-uid="67b781076d05d">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076d05d">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076d0c6">
    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="67b781076d1ee">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076d05d">
             
            <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="67b781076d23a" data-uid="67b781076d23a">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076d23a">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076d272">
    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="67b781076d2ac">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076d23a">
             
            <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="67b781076d2e6" data-uid="67b781076d2e6">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076d2e6">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076d317">
    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="67b781076d34d">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076d2e6">
             
            <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="67b781076d383" data-uid="67b781076d383">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076d383">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076d3b4">
    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="67b781076d3e7">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076d383">
             
            <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">A implementation of data-tooltip</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">A implementation of data-tooltip</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 
<div class="c-tooltip c-tooltip--bottom c-tooltip--hidden" original-placement="c-tooltip--bottom" id="67b781076dcd2" data-uid="67b781076dcd2">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076dcd2">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076dd0a">
    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="67b781076dd47">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076dcd2">
             
            <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="67b781076dd8c" data-uid="67b781076dd8c">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076dd8c">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076ddc5">
    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="67b781076ddfd">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076dd8c">
             
            <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="67b781076de3a" data-uid="67b781076de3a">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076de3a">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076de70">
    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="67b781076deab">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076de3a">
             
            <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="67b781076deea" data-uid="67b781076deea">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="67b781076deea">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="67b781076df1f">
    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="67b781076df59">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="67b781076deea">
             
            <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">A implementation of data-tooltip</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">A implementation of data-tooltip</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