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="673ed3c6df91e" data-uid="673ed3c6df91e">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6df91e">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6df999">
    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="673ed3c6dfa82">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6df91e">
             
            <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="673ed3c6dfac7" data-uid="673ed3c6dfac7">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6dfac7">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6dfaf5">
    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="673ed3c6dfb28">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6dfac7">
             
            <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="673ed3c6dfb59" data-uid="673ed3c6dfb59">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6dfb59">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6dfb82">
    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="673ed3c6dfbaf">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6dfb59">
             
            <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="673ed3c6dfbf1" data-uid="673ed3c6dfbf1">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6dfbf1">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6dfc1d">
    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="673ed3c6dfc4d">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6dfbf1">
             
            <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="673ed3c6e0488" data-uid="673ed3c6e0488">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6e0488">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6e04b4">
    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="673ed3c6e04e5">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6e0488">
             
            <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="673ed3c6e0518" data-uid="673ed3c6e0518">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6e0518">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6e054a">
    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="673ed3c6e0576">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6e0518">
             
            <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="673ed3c6e05a3" data-uid="673ed3c6e05a3">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6e05a3">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6e05ca">
    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="673ed3c6e05f5">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6e05a3">
             
            <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="673ed3c6e0620" data-uid="673ed3c6e0620">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed3c6e0620">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed3c6e0646">
    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="673ed3c6e066f">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed3c6e0620">
             
            <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