o-工具点

o-tooltip是一个通常用于注释或突出用户界面比特的组件.

• 使用量
  • 标记
  • Java 脚本
  • 萨斯
• 自定义
• 移徙指南
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-tracking。 。 。 .

标记

此 HTML 演示了即时化 o-tooltip 的宣告方式 。 如果你正在使用建设服务 或发射自己的 o.DOMContentLoaded 事件,这就是创建工具提示所需的全部.

<div class="demo-tooltip-target" id="declarative-tooltip-target">
    A bit of UI to annotate
</div>

<div
    data-o-component="o-tooltip"
    data-o-tooltip-position="below"
    data-o-tooltip-target="declarative-tooltip-target"
    data-o-tooltip-show-on-construction="true"
    id="my-tooltip-element"
>
    <div class="o-tooltip-content">Some text to go in the tooltip</div>
</div>

此 HTML 是强制选项的示例 :

<div class="demo-tooltip-container">
    <button class="o-buttons o-buttons--big imperative-tooltip-target">
        Button description text/icon
    </button>
</div>

属性可以声明设置,也可以在一个选项对象的即时化上传递. 完整的数据属性列表 :

• data-o-tooltip-target: 必需。 工具提示目标(指向的东西)的ID选择器
• data-o-tooltip-position: 可选。 工具提示相对于目标的优先位置 。 可以成为其中之一 above, (中文(简体) ), below, (中文(简体) ), left, (中文(简体) ), right。如果没有空间使通过选项时的工具提示变为工具提示,则该值被翻转(以上变为下方,左变为右). 默认为下. 也可以指定每个视图宽度("默认","S","M","L","XL")等数据-o-tooltip-post-s="左"的不同位置. 该位置会回落到数据-o-tooltip-位置的默认位置上,否则"从下".
• data-o-tooltip-show-on-construction: 可选。 布尔值 。 如果您想要工具提示在构建后立即被渲染, 请设定为真实 。 默认为假.
• data-o-tooltip-show-on-hover: 可选。 布尔值 。 如果您想要根据目标鼠标覆盖和鼠标退出事件( 分别) 显示和隐藏工具提示, 请设定为真实 。 默认为假.
• data-o-tooltip-show-on-focus: 可选。 布尔值 。 设定为真实, 如果您想要显示和隐藏基于目标焦点和焦点事件( 分别) 的工具提示 。 默认为假.
• data-o-tooltip-show-on-click: 可选。 布尔值 。 如果您想要在单击目标元素时显示工具提示, 请设定为真实 。 默认为假.
• data-o-tooltip-toggle-on-click: 可选。 布尔值 。 如果您想要通过点击目标来显示和隐藏工具提示, 请设定为真 .
• data-o-tooltip-show-after: 可选。 整数值. 指定显示工具提示前的等待秒数。 仅适用于下列情况: data-o-tooltip-show-on-construction 设置为 false
• data-o-tooltip-close-after: 可选。 整数值. 指定关闭工具提示前的等待秒数。 仅适用于下列情况: data-o-tooltip-show-on-construction 设置为 true
• data-o-tooltip-z-index: 可选。 工具提示的 Z 索引 .
• data-o-tooltip-animation-distance: 可选。 与字符串 px 后缀。 远离目标开始和结束动画. 默认为"10px" .
• data-o-tooltip-append-to-body: 可选。 将工具提示添加到 body 元素的定位和大小要根据身体而不是母元素。 默认情况下,该工具提示作为工具提示目标的兄弟姐妹被附加. 默认为 false。 。 。 .
• data-o-tooltip-theme: 可选。 用于在创建工具提示时强制应用主题,否则如果复制工具提示标记会使用下面描述的主题类. 默认为 undefined。 。 。 .

主题

要公开应用一个主题,请添加类 o-tooltip o-tooltip--[theme name] 敬你的标记。 例如,为专业主题输出一个工具提示:

<div class="demo-tooltip-target" id="declarative-tooltip-target">
    A bit of UI to annotate
</div>

<div
    data-o-component="o-tooltip"
    class="o-tooltip o-tooltip--professional"
    data-o-tooltip-position="below"
    data-o-tooltip-target="declarative-tooltip-target"
    data-o-tooltip-show-on-construction="true"
    id="my-tooltip-element"
>
    <div class="o-tooltip-content">Some text to go in the tooltip</div>
</div>

您也可以使用 JavaScript API 设置主题 .

Java 脚本

没有代码会自动运行, 除非你正在使用构建服务 . 您必须构建一个 o-tooltip 物体或起火 o.DOMContentLoaded 事件, oTooltip 正在听 .

构造 O- 工具提示

如果您已声明设置了工具提示,则适用以下规定:

import Tooltip from '@financial-times/o-tooltip';
const tooltipEl = Document.getElementById('my-tooltip-element');
const tooltip = new Tooltip(tooltipEl);

或者,如果您想刻意构建一个工具提示,您可以通过在您的目标元素和一个选项对象中传递来即时切换o-tool提示.

import Tooltip from '@financial-times/o-tooltip';
const tooltipEl = document.querySelector('.imperative-tooltip-element');
const opts = {
    target: 'tooltip-target-imperative',
    content: 'Click to save to somewhere',
    showOnConstruction: true,
    position: 'right',
};

const tooltip = new Tooltip(tooltipEl, opts);

由于这从零开始创建了工具提示,除以下内容外,在选项对象中包括任何声明属性(如上所列举)也很重要:

• content: 必需。 弦乐 这是将在工具提示中显示的内容 .

在正文中直接创建工具提示

存在无法在元素旁边显示工具提示的情况( 即元素的母体有) overlow: hidden) (中文(简体) ). 对于这类情况,工具提示可以使用 appendToBody 配置属性, 这将迫使工具提示元素就在前面创建 body 标记关闭.

import Tooltip from '@financial-times/o-tooltip';
const tooltipEl = document.querySelector('.imperative-tooltip-element');
const opts = {
    target: 'tooltip-target-imperative',
    content: 'Click to save to somewhere',
    showOnConstruction: true,
    position: 'above',
    appendToBody: true,
};
const tooltip = new Tooltip(tooltipEl, opts);

记着! 此属性只能在解析工具提示时使用

发射 ODOM 失败事件

document.addEventListener('DOMContentLoaded', function () {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});

萨斯

这个 oTooltip 混音用于输出工具提示选择器和样式. 该产出包括所有 .o-tooltip 类 :

@include oTooltip();

.o-tooltip {
    /* styles */
}
.o-tooltip-content {
    /* styles */
}
/* etc. */

您也可以选择只为特定主题输出工具提示 :

@include oTooltip(
    $opts: (
        'professional',
    )
);

有一个 origami 登记处提供的全部Sass文件。 。 。 .

自定义主题

包含 oTooltipAddTheme 混合输出自定义工具提示主题。 混音接受您主题的名称和选项地图:

• name: 您的主题名称 。 用于修改类输出 o-tooltip--[name]。 。 。 .
• opts: 您主题选项地图.
  • background-color: 工具提示的背景颜色.
  • foreground-color: 工具提示的前景/文本颜色.
  • close-foreground-color (可选) : 关闭按钮的颜色 。 如果没有设置 foreground-color 已使用.

以下的例子说明了如何添加一个名为"我的产品-修饰"的自定义主题,其背景为平板,前景为白色. 而不是"我的产品-修饰者"选择一个包含您项目名称的描述性名称,所以清晰地显示自定义主题的添加地点.

// Outputs CSS class o-tooltip--my-product-modifier.
// Uses an o-colors function to fetch Origami colour values.
@include oTooltipAddTheme(
    'my-product-modifier',
    (
        'background-color': oColorsByName('slate'),
        'foreground-color': oColorsByName('white'),
    )
);

这将输出一个 CSS 类 o-tooltip--[name]。在工具提示中添加此类以查看自定义主题.

移徙指南

联系人

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

许可证

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