Foxit Developer

@tooltip ​

A simple text tooltip shown on mouse enter and hidden on mouse leave. It does not support rich content or interactions.

Examples ​

Show tooltip on mouse enter ​

html
<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>

Four placements ​

html
<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>
json
{
  "iframeOptions": {
    "style": "height: 400px"
  }
}

Fragment configuration ​

html
<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>
json
{
  "iframeOptions": {
    "style": "height: 400px"
  }
}
html
<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>
json
{
  "iframeOptions": {
    "style": "height: 400px"
  }
}