o3 个工具提示

o3-tooltip是两个组件的主机: o3-tooltip-onboarding 财务报告和审定财务报表 o3-tooltip-toggle。登入工具提示有助于更平滑地介绍新功能或功能。 切换提示是紧凑的信息,旨在在需要时提供更多的见解。 看我们的 使用信息和品牌支持设计准则。 。 。 .

• o3 个工具提示
• 标记
• Java 脚本
• 密码
• 联合来文十
  • 登入工具提示
  • 工具提示切换
• 钩子
• 移徙指南
• 联系人
• 许可证

标记

我们提供定制元素 <o3-tooltip-onboarding> 财务报告和审定财务报表 <o3-tooltip-toggle>。反应用户可能包括使用 JSX 模板。 。 。 .

<o3-tooltip-onboarding> 用于在 HTML 目标元素上显示工具提示 aria-describedby 属性。 它用于提供有关目标元素的额外信息,并在页面被加载后立即显示. 它只能通过点击关闭按钮来关闭.

<o3-tooltip-toggle> 没有关闭按钮,而是使用信息图标。 它可以通过点击信息图标来触发,如果用户在工具提示外点击,按下ESC,或再次点击信息图标,则会从DOM中删除.

以下是如何使用的实例 <o3-tooltip-onboarding> 财务报告和审定财务报表 <o3-tooltip-toggle> 自定义元素 :

<!-- <o3-tooltip-onboarding> -->
<div data-o3-brand="[your brand]">
    <button
        id="demo-o3-tooltip-id"
        class="o3-button o3-button--secondary o3-button--big demo-tooltip-target"
        aria-describedby="demo-o3-tooltip-content"
    >
        Share
    </button>
    <o3-tooltip-onboarding
        role="tooltip"
        placement="top"
        target-id="demo-o3-tooltip-id"
        class="o3-tooltip"
        content="Tool tip content that is quite long, Tool tip content that is quite long, Tool tip content that is quite long"
        title="Title"
        content-id="demo-o3-tooltip-content"
    >
    </o3-tooltip-onboarding>
</div>

content-id 用于将工具提示与目标元素链接。 它被用来提供关于目标要素的补充资料.

<!-- <o3-tooltip-toggle> -->
<div data-o3-brand="[your brand]">
    <o3-tooltip-toggle
        placement="bottom"
        class="o3-tooltip"
        content="click the button to see the tooltip"
        title="Title"
        info-label="more information"
    >
    </o3-tooltip-toggle>
</div>

info-label 属性用于为信息图标提供标签,以获得更好的屏幕阅读器体验. 默认情况下,它被设定为"更多信息".

Java 脚本

除非您导入客户端JavaScript, 否则不会自动运行代码 。 要导入 JavaScript, 您可以使用以下代码 :

import '@financial-times/o3-tooltip';

密码

到样式 o3-tooltip 导入特定品牌 cs,这取决于您的项目。 例如:

@import '@financial-times/o3-tooltip/css/[your brand].css';

联合来文十

o3-tooltip 出口两个JSX模板, TooltipOnboarding 财务报告和审定财务报表 TooltipToggle 每个工具提示组件。 JSX 模板导出为 cjs (共同联合来文)和 esm (ECMAScript)模块,因此取决于您的系统配置,您可能需要导入正确的模块类型. TSX模板可以帮助避免复制复制html. 例如:

import {
    TooltipOnboarding,
    TooltipToggle,
} from '@financial-times/o3-tooltip/cjs';

import '@financial-times/o3-tooltip'; // import the JavaScript needed for custom elements on client side

import '@financial-times/o3-tooltip/css/[your brand].css'; // tooltip styling

<div className="o3-brand-[your brand]">
    <button id="target" aria-describedby="contentId">
        Target element
    </button>
    <TooltipOnboarding {...props} />;
    <TooltipToggle {...props} />
</div>;

登入工具提示

这个 TooltipOnboarding JSX要素接受以下内容: props数字 :

type Placement =
    | 'top'
    | 'bottom'
    | 'left'
    | 'right'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'left-start'
    | 'left-end'
    | 'right-start'
    | 'right-end';

工具提示切换

这个 ToggleTooltip JSX要素接受以下内容: props数字 :

type Placement = 'top' | 'bottom' | 'left' | 'right';

钩子

o3-tooltip 提供 onClose 钩子允许您在工具提示关闭前执行动作 .

图十

import {TooltipOnboarding} from "@financial-times/o3-tooltip";

<TooltipOnboarding id='my-tooltip' onClose={() => {/* behaviour to execute when onClose is called */}} />

联合来文

请使用 HTML 工具提示 我们的榜样。 。 。 .

const tooltip = document.querySelector('#my-tooltip');

tooltip.onClose = () => {/* custom onClose code goes here */}

移徙指南

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .