福昕开发者文档中心

@tooltip ​

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

示例 ​

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

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>

Tooltip 四种显示方位 ​

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 配置 ​

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"
  }
}