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="680c31883c89c" data-uid="680c31883c89c">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c31883c89c">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c31883c936">
    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="680c31883ca9c">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c31883c89c">
             
            <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="680c31883cb18" data-uid="680c31883cb18">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c31883cb18">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c31883cb68">
    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="680c31883cbba">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c31883cb18">
             
            <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="680c31883cc0c" data-uid="680c31883cc0c">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c31883cc0c">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c31883cc69">
    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="680c31883ccbd">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c31883cc0c">
             
            <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="680c31883cd13" data-uid="680c31883cd13">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c31883cd13">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c31883cd5e">
    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="680c31883cdaf">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c31883cd13">
             
            <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="680c31883ff21" data-uid="680c31883ff21">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c31883ff21">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c31883ff85">
    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="680c31883ffef">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c31883ff21">
             
            <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="680c318840049" data-uid="680c318840049">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c318840049">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c318840092">
    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="680c3188400e0">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c318840049">
             
            <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="680c318840131" data-uid="680c318840131">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c318840131">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c318840177">
    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="680c3188401ce">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c318840131">
             
            <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="680c31884021d" data-uid="680c31884021d">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="680c31884021d">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="680c318840263">
    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="680c3188402af">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="680c31884021d">
             
            <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