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="678b0a53c1b41" data-uid="678b0a53c1b41">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c1b41">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c1bbc">
    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="678b0a53c1cd9">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c1b41">
             
            <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="678b0a53c1d32" data-uid="678b0a53c1d32">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c1d32">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c1d66">
    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="678b0a53c1d9e">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c1d32">
             
            <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="678b0a53c1dd4" data-uid="678b0a53c1dd4">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c1dd4">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c1e0d">
    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="678b0a53c1e39">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c1dd4">
             
            <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="678b0a53c1e67" data-uid="678b0a53c1e67">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c1e67">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c1e8d">
    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="678b0a53c1eb8">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c1e67">
             
            <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="678b0a53c23db" data-uid="678b0a53c23db">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c23db">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c2409">
    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="678b0a53c243b">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c23db">
             
            <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="678b0a53c246b" data-uid="678b0a53c246b">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c246b">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c2492">
    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="678b0a53c24ce">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c246b">
             
            <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="678b0a53c24fa" data-uid="678b0a53c24fa">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c24fa">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c2521">
    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="678b0a53c254b">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c24fa">
             
            <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="678b0a53c2576" data-uid="678b0a53c2576">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="678b0a53c2576">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="678b0a53c259c">
    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="678b0a53c25c6">
                    </span>
                <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="678b0a53c2576">
             
            <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