@tooltip | Foxit PDF SDK For Web

这是一个简单的文本弹出提示，鼠标进入时显示，鼠标离开时隐藏。这个工具提示不支持复杂的文本和操作。

# 示例

# 当鼠标进入时显示工具提示

# Tooltip四种显示方位。

# Fragment 配置

<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

# 示例

# 当鼠标进入时显示工具提示

# Tooltip四种显示方位。

# Fragment 配置

# 侧边栏工具提示