Product Selector

Fusion 5.12
    Fusion 5.12

    tooltip

    Description

    Creates a tooltip.

    Usage

    as attribute

    <ANY tooltip="{string}">
   ...
</ANY>

    Parameters

    Param Type Details

    tooltip

    string

    The text to display in the tooltip

    Example

    Source

    <layout:grid styling="textcenter">
    <layout:block medium="1-1">
        <h3 id="example_postion">Postion</h3>
    </layout:block>
    <layout:block medium="1-3">
        <h3 tooltip="Top Left" styling="tooltip-top-left" id="example_top-left">Top-Left</h3>
    </layout:block>
    <layout:block medium="1-3">
        <h3 tooltip="Top!" styling="tooltip-top" id="example_top">Top</h3>
    </layout:block>
    <layout:block medium="1-3">
        <h3 tooltip="Top Right" styling="tooltip-top-right" id="example_top-right">Top-Right</h3>
    </layout:block>
</layout:grid>
<layout:grid styling="textcenter">
    <layout:block medium="1-3">
        <h3 tooltip="Left" styling="tooltip-left" id="example_left">Left</h3>
    </layout:block>
    <layout:block medium="1-3">
        <h3 id="example">.</h3>
    </layout:block>
    <layout:block medium="1-3">
        <h3 tooltip="Right" styling="tooltip-right" id="example_right">Right</h3>
    </layout:block>
</layout:grid>
<layout:grid styling="textcenter">
    <layout:block medium="1-3">
        <h3 tooltip="Bottom Left" styling="tooltip-bottom-left" id="example_bottom-left">Bottom-Left</h3>
    </layout:block>
    <layout:block medium="1-3">
        <h3 tooltip="Bottom!" styling="tooltip-bottom" id="example_bottom">Bottom</h3>
    </layout:block>
    <layout:block medium="1-3">
        <h3 tooltip="Bottom Right" styling="tooltip-bottom-right" id="example_bottom-right">Bottom-Right</h3>
    </layout:block>
</layout:grid>
<hr />
<layout:grid styling="textcenter">
    <layout:block medium="1-1">
        <h3 id="example_sizes">Sizes</h3>
    </layout:block>
    <layout:block medium="1-3">
        <button tooltip="You can show very very long sentences inside tooltips by using various available size variation classes." styling="button tooltip-top tooltip-small">Small</button>
    </layout:block>
    <layout:block medium="1-3">
        <button tooltip="You can show very very long sentences inside tooltips by using various available size variation classes." styling="button tooltip-top tooltip-medium">Medium</button>
    </layout:block>
    <layout:block medium="1-3">
        <button tooltip="You can show very very long sentences inside tooltips by using various available size variation classes." styling="button tooltip-top tooltip-large">Large</button>
    </layout:block>
</layout:grid>
<hr />
<layout:grid styling="textcenter">
    <layout:block medium="1-1">
        <h3 id="example_colours">Colours</h3>
    </layout:block>
    <layout:block medium="1-4">
        <button tooltip="This is an error tooltip" styling="button bg-red tooltip-top tooltip-error">Red</button>
    </layout:block>
    <layout:block medium="1-4">
        <button tooltip="This is a warning tooltip" styling="button bg-yellow tooltip-top tooltip-warning">Yellow</button>
    </layout:block>
    <layout:block medium="1-4">
        <button tooltip="This is an info tooltip" styling="button tooltip-top tooltip-info">Blue</button>
    </layout:block>
    <layout:block medium="1-4">
        <button tooltip="This is a success tooltip" styling="button button-green tooltip-top tooltip-success">Green</button>
    </layout:block>
</layout:grid>

    Result

    Result