# # @tooltip

This is a simple text pop-up tip which is shown on mouse enter and hidden on mouse leave. This tooltip doesn't support complex text and operations.

## # Examples

### # Show tooltip on mouse enter

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <xbutton @tooltip tooltip-title="Tooltip title">show tooltip on mouse enter</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

### # Tooltip placement

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="vertical">
                    <xbutton @tooltip tooltip-title="pop text" tooltip-placement="top">Top</xbutton>
                    <div class="left-right">
                        <xbutton @tooltip tooltip-title="pop text" tooltip-placement="left">Left</xbutton>
                        <xbutton @tooltip tooltip-title="pop text" tooltip-placement="right">Right</xbutton>
                    </div>
                    <xbutton @tooltip tooltip-title="pop text" tooltip-placement="bottom">Bottom</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .vertical {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
            margin: 50px auto;
        }
        .vertical .fv__ui-button {
            width: 60px;
            justify-content: center;
        }
        .left-right {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
        }
        .fv__ui-body {
            display: none;
        }
    </style>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 400px"
        }
    }

### # Fragment configuration

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="vertical">
                    <xbutton name="top-button" @tooltip tooltip-title="pop text" tooltip-placement="top">Top</xbutton>
                    <div class="left-right">
                        <xbutton name="left-button" @tooltip tooltip-title="pop text" tooltip-placement="left">Left</xbutton>
                        <xbutton name="right-button" @tooltip tooltip-title="pop text" tooltip-placement="right">Right</xbutton>
                    </div>
                    <xbutton name="bottom-button" @tooltip tooltip-title="pop text" tooltip-placement="bottom">Bottom</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .vertical {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
            margin: 50px auto;
        }
        .vertical .fv__ui-button {
            width: 60px;
            justify-content: center;
        }
        .left-right {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
        }
        .fv__ui-body {
            display: none;
        }
    </style>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            getDefaultFragments: function() {
                return [{
                    target: 'left-button',
                    config: {
                        tooltip: {
                            title: 'fragment config'
                        }
                    }
                }]
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 400px"
        }
    }

### # Tooltip on sidebar

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="fv__ui-body">
                    <sidebar>
                        <!-- tooltip-anchor: specify an element to display tip  -->
                        <sidebar-panel
                            @tooltip
                            tooltip-title="Tooltip text"
                            tooltip-placement="right"
                            tooltip-anchor=".fv__ui-sidebar-nav-ctrl"
                            icon-class="fv__icon-sidebar-comment-list"
                        ></sidebar-panel>
                    </sidebar>
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 400px"
        }
    }