template.html

<style type="text/css">
    @font-face {
        font-family: 'tbicons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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AAIAAAAAA+kDqgAIACAAAAEXIRUhBxc3JyURHgEzITI2NzUjFSERIRUzNS4BIyEiBgLKdf5NAbByP+Dg/PgBNCcBzyc0AVz+MgHOXAE0J/4yKDQClXRZcz7e3oD9RCUyMiXMzAK8zMwlMjIAAAMAAAAAA6QD6QADABMAHAAAAREhEQcRHgEXIT4BNxEuASchDgEnETMRITUhDgEDSv4MWwEzJwH0JjQBATQm/gwnM7dZAhL97iYyAtj9hAJ8Bf2IJjMBATMmAngmNAEBNJX9hAJ8WwEzAAAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABwABAAEAAAAAAAIABwAIAAEAAAAAAAMABwAPAAEAAAAAAAQABwAWAAEAAAAAAAUACwAdAAEAAAAAAAYABwAoAAEAAAAAAAoALAAvAAEAAAAAAAsAEgBbAAMAAQQJAAAAAgBtAAMAAQQJAAEADgBvAAMAAQQJAAIADgB9AAMAAQQJAAMADgCLAAMAAQQJAAQADgCZAAMAAQQJAAUAFgCnAAMAAQQJAAYADgC9AAMAAQQJAAoAWADLAAMAAQQJAAsAJAEjIE5ld0ljb25SZWd1bGFyTmV3SWNvbk5ld0ljb25WZXJzaW9uIDEuME5ld0ljb25Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAE4AZQB3AEkAYwBvAG4AUgBlAGcAdQBsAGEAcgBOAGUAdwBJAGMAbwBuAE4AZQB3AEkAYwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAE4AZQB3AEkAYwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIwECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4BHwEgASEBIgEjASQAEFRleHRfT3V0ZGVudF8wMDELUGljdHVyZV8wMDEMU2V0dGluZ3NfMDAxEENvbG9yX3BpY2tlcl8wMDIQQWxpZ25fQ2VudGVyXzAwNghMaW5lXzAwMQ1VbmRlcmxpbmVfMDAxDFNvcnRfWi1BXzAwMQhVbmRvXzAwMRBDaGFydF9idWJibGVfMDAxC0Rvd25sb2FkXzAwD1RleHRfaW5kZW50XzAwMRJDaGFydF9Eb3VnaG51dF8wMDEJQ2xlYXJfMDAyDU51bWJlcmluZ18wMDEMU29ydF9BLVpfMDAxCkl0YWxpY18wMDELQnVsbGV0c18wMDEJUGFzdGVfMDAxCFJlZG9fMDAxD0NoYXJ0X3JhZGFyXzAwMQ9BbGlnbl9SaWdodF8wMDEJVGFibGVfMDAxDkFsaWduX0xlZnRfMDAxCE1lbnVfMDAxB0N1dF8wMDIIQm9sZF8wMDERQWxpZ25fSnVzdGlmeV8wMDEKUmVsb2FkXzAwMQpTZWFyY2hfMDAxClVwbG9hZF8wMDEKRGVzaWduXzAwNQpFeHBvcnRfMDAxCENvcHlfMDAyAAA=) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-bigger .e-tbar-btn .tb-icons {
        font-size: 18px;
    }

    .e-tbar-btn .tb-icons {
        font-family: 'tbicons';
        speak: none;
        font-size: 16px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
    }

    .e-cut-icon:before {
        content: "\e719"
    }

    .e-copy-icon:before {
        content: "\e721"
    }

    .e-paste-icon:before {
        content: "\e712"
    }

    .e-bold-icon:before {
        content: "\e71a"
    }

    .e-underline-icon:before {
        content: "\e706";
    }

    .e-italic-icon:before {
        content: "\e710"
    }

    #Toolbar {
        margin: 10px auto;
    }

    .toolbarContainer {
        height: 60px;
        margin: 0 auto;
        width: 250px;
    }

    .e-tooltip-wrap p {
        margin: 0;
    }

    .e-tooltip-wrap h6 {
        color: inherit;
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.1;
        margin-bottom: 6px;
        margin-top: 3px;
    }

    .e-bigger .toolbarContainer {
        width: 350px;
    }

    .e-bigger .e-tooltip-wrap p {
        font-size: 13px;
    }

    .e-bigger .e-tooltip-wrap h6 {
        font-size: 14px;
    }

    @media screen and (max-width: 420px) {
        .e-bigger .toolbarContainer {
            width: 75%;
        }
    }

</style>
<div id="targetContainer" class="col-lg-12 control-section">
    <!-- Tooltip element -->
    <div id="Tooltip">
        <div class="toolbarContainer">
            <!-- Toolbar element -->
            <div id="Toolbar">
            </div>
        </div>
    </div>
</div>
<div id="action-description">
    <p>This sample demonstrates the Template functionalities of the Tooltip
    which will open by Hover or Touch-hold action on Toolbar option.
    </p>
</div>

<div id="description">
    <p>This sample illustrates the way to display the template content on the tooltip. With the usage of Template, the user
        can format and structure the HTML content to be displayed on the tooltip as per their application needs.</p>
    <p>In this sample, the tooltip is integrated with toolbar component to display the respective icon’s information. Here, the
        HTML template design is compiled and then the resultant output display is directly assigned to the <code> content</code>property
        of the tooltip. The template compilation process needs to be done on the <code>beforeRender</code> event of the tooltip.</p>
    <p>More information about setting template content on the Tooltip can be found in the
        <a href="http://ej2.syncfusion.com/documentation/tooltip/content.html#template-content" target="_blank"> documentation section</a>.
    </p>
</div>