Search results

Custom Tooltip with dynamic HTML

Tooltip loads HTML pages via HTML tags such as iframe, video, and map using the content property, which supports both string and HTML tags.

To load an iframe element in tooltip, set the required iframe in the content of tooltip while initializing the tooltip control. Refer to the following code.

content: '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>
razor
html-page.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Popups
@{
    var content = "<iframe src=\"https://www.syncfusion.com/products/essential-js2\" id=\"tooltipFrame\"></iframe>";
}

<div id='container'>
    <div id="tooltipContent">
        <div class="content">
            @Html.EJS().Tooltip("target").CssClass("e-tooltip-css").OpensOn("Click").Width("350").Height("250").Content(content).ContentTemplate(@<button class="text e-btn e-primary e-outline" id="iframeContent">Embedded Iframe</button>).Render()
        </div>
    </div>
</div>

<style>
    #tooltipContent {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 65px 10px;
    }

    .content {
        display: inline-block;
        width: 49%;
    }

    #tooltipFrame {
        width: 332px;
        height: 233px;
    }

    .content button {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
public ActionResult TooltipView()
{
    return View();
}