@10up/component-tooltip 中文文档教程

Question

10up Tooltip component

一个可访问的工具提示组件。

Installation

NPM

npm install --save @10up/component-tooltip

Standalone

克隆这个 repo 并从 dist 导入 tooltip.js 和 tooltip.css / 目录。

API

该组件接受一个参数，一个可选的回调。

Callbacks

• Pass in an optional function to be executed with the tooltip.

Usage

Markup

这是工具提示期望的标记模板。

    <!--
    A Tooltip with a span
    -->

    <div>
        <span class="a11y-tip">
            <span class="a11y-tip__trigger">
                Tooltip Trigger span
            </span>

            <span class="a11y-tip__help">
                Tooltip content goes here
            </span>
        </span><!--/.a11y-tip-->
    </div>

    <!--
    A Tooltip with a link
    -->

    <div>
        <span class="a11y-tip a11y-tip--no-delay">
            <a href="#tt_id" class="a11y-tip__trigger">
                Link w/top tooltip
            </a>

            <span id="tt_id" class="a11y-tip__help a11y-tip__help--top">
                Activate this link to go somewhere!
            </span>
        </span><!--/.a11y-tip-->
    </div>

    <!--
    A Tooltip with a button
    -->

    <div>
        <span class="a11y-tip">
            <button type="button" class="a11y-tip__trigger" aria-describedby="tt_id" aria-controls="tt_id">
                Button w/bottom tooltip
            </button>

            <span id="tt_id" role="tooltip" class="a11y-tip__help a11y-tip__help--bottom">
                Buttons do things on the page. Activate it to perform an action.
            </span>
        </span><!--/.a11y-tip-->
    </div>

    <!--
    A Tooltip with an input
    -->

    <div>
        <label for="test">
            Input with right tooltip
        </label>
        <span class="a11y-tip">
            <input id="test" placeholder="enter text" class="a11y-tip__trigger" aria-describedby="test_desc" type="text">

            <span id="test_desc" role="tooltip" class="a11y-tip__help a11y-tip__help--right">
                Enter something here. Text would be fine.
            </span>
        </span><!--/.a11y-tip-->
    </div>

    <!--
    Click to show/hide tooltip
    -->

    <div>
        <span class="a11y-tip a11y-tip--toggle">
            <span class="a11y-tip__trigger">
                Tooltip Toggle Trigger
            </span>

            <span class="a11y-tip__help">
                Tooltip content goes here
            </span>
        </span><!--/.a11y-tip-->
    </div>

CSS

这些样式可以通过使用 PostCSS 导入或通过在您的项目中包含独立的 CSS 文件来导入到您现有的代码库中。

PostCSS Imports

@import '@10up/component-tooltip';

Standalone

包含 dist/ 目录中的 tooltip.css 文件。

JavaScript

使用可选的回调和正确的标记运行工具提示以生成 a11y 工具提示。

NPM

import Tooltip from '@10up/component-tooltip';


new Tooltip('.tooltip', () => {
    console.log( 'my awesome callback' );
} );

Standalone

<script src="unpkg.com/@10up/component-tooltip@2.0.0/index.umd.js"></script>

let myTooltip = new TenUp.tooltip('.tooltip', () => {
    console.log( 'my awesome callback' );
} );

Demo

可以在 demo 目录中找到示例实现。

Support Level

活跃：10up 正在为此积极努力，我们希望在可预见的未来继续努力，包括保持对最新版本 WordPress 的测试。 欢迎错误报告、功能请求、问题和请求请求。

Like what you see?