Blazor [Preview]
Demos
Support
Forum
Download
Search results

Setting Dimension

Height and width

The Tooltip can either be assigned auto height and width values or specific pixel values. The Width and Height properties are used to set the outer dimension of the Tooltip element. The default value for both the properties is auto. It also accepts string and number values in pixels.

The following sample explains how to set dimensions for the Tooltip.

@using Syncfusion.EJ2.Blazor.Popups
<EjsTooltip ID="Tooltip" Height="50px" Width="200px" Target="#btn" Content="@Content">
        <EjsButton ID="btn" Content="Show Tooltip"></EjsButton>
</EjsTooltip>

@code
{
    object Content="Lets go green & Save Earth !!";
}

<style>
    #tooltip {
        position: absolute;
        left: calc( 50% - 60px);
        top: 38%;
    }
</style>

Output be like the below.

Tooltip - Dimension

Scroll mode

When Height is specified with a certain pixel value and the Tooltip content overflows, the scrolling mode gets enabled.

@using Syncfusion.EJ2.Blazor.Popups
<EjsTooltip ID="tooltip" Height="60px" Width="200px" IsSticky="true" Target="#target" Content="@Content">
        <div id='container'>
            <p>
                A green home is a type of house designed to be
                <a id="target">
                    <u>environmentally friendly</u>
                </a> and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As green homes
                have become more prevalent we have also seen the emergence of green affordable housing.
            </p>
        </div>
</EjsTooltip>
@code
{
    object Content = "<div><b>Environmentally friendly</b> or environment-friendly, (also referred to as eco-friendly, nature-friendly, and green) are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</div>";
}
<style>
    #tooltip {
        position: absolute;
        left: calc( 50% - 60px);
        top: 38%;
    }
</style>

Output be like the below.

Tooltip - Scroll Mode

The scrolling mode can best be seen when the sticky mode of the Tooltip is enabled. To enable sticky mode, set the IsSticky property to true.

Previous
Next