HTML+CSS を使用してアニメーション プロンプト ツールを作成する

ユーザーがアイコンを配置するための追加のコンテキストが必要な場合、ボタンをクリックするための何らかの保証が必要な場合、あるいは画像にイースターエッグのタイトルを付ける必要がある場合、ツールチップはユーザーインターフェイスを強化する素晴らしい方法です。次に、HTML と CSS だけを使用して、アニメーション化されたツールチップを作成してみましょう。

#(推奨チュートリアル:

CSS チュートリアル)

デモ

私たちの作業目標は次のとおりです:

主な目標は、ツールヒントを簡単に追加する方法を提供することです。そのため、カスタム

tooltip 属性を追加することでそれを行います:

<span tooltip="message">visible text or icon, etc.</span><br/>

アクセシビリティと機能に関する注意事項

508 準拠のツールチップを探している場合、またはコンテナーをサポートするよりスマートなツールチップが必要な場合 競合検出および/または HTML コンテンツとサポートプレーン テキストの場合は、ニーズを満たすサードパーティのスクリプトを使用したソリューションが多数あります。

#いくつかの期待値を設定してみましょう

JavaScript は必要ありません

• # (クラス名の代わりに) 属性セレクターと、既存の DOM 要素に一致する CSS の組み込みパターン

• # を使用します (タグに新しいものを追加する必要はありません)

• #コード例にはプレフィックスがありません (必要に応じて、ターゲット ブラウザのベンダー プレフィックスを追加します)

#プロンプト ボックスがトリガーされると仮定します。マウスオーバー/ホバーによる
これは単なるプレーンテキストのプロンプトボックスです (HTML、画像などはサポートされていません)
プロンプトが表示されると、ボックスが呼び出され、巧妙なアニメーションがあります。
今すぐ始めましょう

• 最初に問題に対処する必要があります。それは、「追加のタグは必要ありません」というものです。 " の。やっぱり、きれいですね。ツールチップは完全に疑似要素 (
::before

と

::after
) に基づいているため、実際には追加の DOM 要素は必要ありません。CSS を通じて制御できます。

他のスタイル セットの要素の疑似要素を使用しており、この要素にツールチップを追加したい場合は、リファクタリングが必要になる場合があります。 プロンプト ボックス

#CSS の位​​置に関する警告もあります。ツールヒントが適切に機能するには、その親要素 (その後ツールヒントを追加します) が

#position:相対

、または

#である必要があります。

• ##位置: 絶対、または

• ##位置: 固定

基本的に、position: static でない限り、何でも構いません。これは、ブラウザによってほぼすべての要素に割り当てられるデフォルトの位置決めモードです。ツールチップは絶対的に配置されるため、その絶対値がどの範囲内で意味を持つのかを知る必要があります。

• デフォルトの位置決めディレクティブ static は、その境界を宣言せず、相対位置決めのためのプロンプト ボックスのコンテキストも提供しません。したがって、ツールチップは、宣言された境界を持つ次に近い親要素を使用します。 ツールチップの使用方法に最適な位置ディレクティブを決定する必要があります。このチュートリアルでは、position: 親要素を基準とした相対位置を想定しています。 UI が絶対位置の要素に依存している場合は、その要素にツールチップを展開するために何らかの再編成 (追加のマークアップ) が必要になる場合があります。

属性セレクター: クイックレビュー

ほとんどの CSS ルールは、

.this -thing

などのクラス名で記述されます。 , しかし、CSSにはいくつかの種類のセレクターがあります。私たちの賢いツールチップでは、属性セレクター、つまり角かっこ表記を使用します。

[foo] {<br/>    background: rgba(0, 0, 0, 0.8);<br/>    color: #fff;<br/>}<br/>

ブラウザが次のようなものを見たとき:

<span foo>Check it out!</span><br/>

ブラウザは、

[foo]

ルールを適用する必要があることを認識します。 ; タグには foo

という属性があります。この例では、

span

自体は半透明の黒い背景と白いテキストになります。

HTML 要素にはさまざまな組み込み属性がありますが、独自の属性を与えることもできます。たとえば、foo やツールチップなどです。デフォルトでは、HTML はこれらの意味を知りませんが、CSS を使用すると、これらのカスタム属性が何を意味するかを HTML に伝えることができます。 #属性セレクターを使用する理由<p>我们后面会使用属性选择器，主要是出于侧重分离的目的。使用属性而不是类名，并不会让我们在详细程度上获得更多益处，类和属性在详细程度上是相同的。 然而，通过使用属性，我们可以把我们的内容放在一块儿，因为HTML属性可以有值，而类名没有值。</p><p>在这个例子的代码中，来权衡一下类名 <code>.tooltip 对比属性 [tooltip] 。类名是 [class] 属性的值中的一个，而tooltip属性可以存放一个值，它就是我们要显示的文字。

<span class="tooltip another-classname">lorem ipsum</span><br/><span tooltip="sit dolar amet">lorem ipsum</span><br/>

使用提示框

我们的提示框会使用两种不同的属性：

• tooltip: 这个属性存放了提示框的内容（一个纯文本字符串）

• flow: 可选；这个属性允许我们控制如何显示提示框。我们可以支持很多方位，但是我们会覆盖4各常用方位：上，左，右，下

1. 相对性

这是用在提示框的父元素上的。让我们来给定一个定位指令，这样提示框的组成部分（即::before 和 ::after 伪元素）的绝对定位就可以以父元素做参照进行定位，而不是以整个页面或祖父元素或DOM树上方的其它外围元素作为参照进行定位。

[tooltip] {<br/>  position: relative;<br/>}<br/>

2. 伪元素准备

在这里，我们要对 ::before 和 ::after 设置常用属性。content 属性是真正让伪元素工作的属性，不过我们稍后再讨论它。

[tooltip]::before,<br/>[tooltip]::after {<br/>    line-height: 1;<br/>    user-select: none;<br/>    pointer-events: none;<br/>    position: absolute;<br/>    display: none;<br/>    opacity: 0;<br/> <br/>    /* opinions */<br/>    text-transform: none; <br/>    font-size: .9em;<br/>}<br/>

3、Dink

它是一个尖尖的小三角形，通过指向它的调用者，为提示框提供对话气泡的感觉。 注意到我们在边界颜色这一块，使用了 tranparent ；由于上色要根据提示框的 flow 值来，所以之后再加上颜色。

[tooltip]::before {<br/>    content: &#39;&#39;;<br/>    z-index: 1001;<br/>    border: 5px solid transparent;<br/>}<br/>

content: '';声明中的值是一个空字符串，这并不是笔误。字符串里面，我们不想要任何东西，但是我们需要这个属性，使得伪元素得以存在。

为了生成一个三角形，我们定义了一个实现边框，在空的盒子（没有内容）上加了一些厚度，而不设定盒子的宽度和高度，仅仅对盒子的每一条边都给一个边框颜色。

4、气泡

这里是重点了。注意内容：attr（tooltip）部分说：“此伪元素应使用tooltip属性的值作为其内容。”这就是为什么对类名使用属性是如此之好！

[tooltip]::after {<br/>    content: attr(tooltip); /* magic! */<br/>    z-index: 1000;<br/>     <br/>    /* most of the rest of this is opinion */<br/>    font-family: Helvetica, sans-serif;<br/>    text-align: center;<br/>     <br/>    /* <br/>    Let the content set the size of the tooltips <br/>    but this will also keep them from being obnoxious<br/>    */<br/>    min-width: 3em;<br/>    max-width: 21em;<br/>    white-space: nowrap;<br/>    overflow: hidden;<br/>    text-overflow: ellipsis;<br/>     <br/>    /* visible design of the tooltip bubbles */<br/>    padding: 1ch 1.5ch;<br/>    border-radius: .3ch;<br/>    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);<br/>    background: #333;<br/>    color: #fff;<br/>}<br/>

请注意，dink和气泡的z-index值。 这些是任意值，但请记住，z索引值是相对的。 含义：z-index为3的元素内部的z-index值为1001只是意味着1001元素将是该z-index：3容器中最顶层的元素。

气泡的z-index应比Dink的z-index至少降低1步。 如果它等于或高于该dink，那么如果您的工具提示使用了框阴影，则最终会在dink上产生不一致的着色效果。

5、交互作用

我们的提示框是通过把鼠标移动到带提示框的元素上面，来激活的。差不多是这样。

[tooltip]:hover::before,<br/>[tooltip]:hover::after {<br/>    display: block;<br/>}<br/>

如果您在第2步中回顾我们的样式块，应该会看到我们使用了opacity：0; 连同显示：无； 用于我们的工具提示部分。 我们这样做是为了在显示和隐藏工具提示时可以使用CSS动画效果。

display属性是不能做成动画的，但是opacity属性可以！我们留到最后来处理动画的问题。如果你对动画提示框没兴趣，只要把第2步中的 opacity: 0; 删掉，无视第7步即可。

最后一件要应用到所有提示框上的是，如果提示框没有内容，能有一个方法来抑制提示框。如果你使用某种动态系统（Vue.js, Angular, 或者 React, PHP等等）来生成提示框的话，我们就不需要笨笨的空白气泡了！

/* don&#39;t show empty tooltips */<br/>[tooltip=&#39;&#39;]::before,<br/>[tooltip=&#39;&#39;]::after {<br/>    display: none !important;<br/>}<br/>

6、流控制

这一步会变得更加复杂，因为我们会使用一些不那么常见的选择器，来帮助我们的提示框基于 flow 值（或没有flow属性）来确定位置。

在我们写样式之前，让我们看看将要用到一些选择器模式。

[tooltip]:not([flow])::before,<br/>[tooltip][flow^="up"]::before {<br/>    /* ...<br/>    properties: values<br/>    ... */<br/>}<br/>

这是在告诉浏览器：“对于所有带有 tooltip 属性来说，其中没有 flow 属性的元素，或者有flow元素，但它的值是以'up'开头的：将这些样式套用到这类元素的::before伪元素上。”

我们在这里使用了一个模式，这样一来，这些东西可以扩展到其它流上，而步需要重复这么多的CSS。这个模式 flow^="up" 使用了 ^= （开头）匹配符。 如果你想增加其它流控制的话，通过这个模式，也可以将样式应用在up-right 和 up-left 方向上（代码中）。

Up (default):

/* ONLY the ::before */<br/>[tooltip]:not([flow])::before,<br/>[tooltip][flow^="up"]::before {<br/>    bottom: 100%;<br/>    border-bottom-width: 0;<br/>    border-top-color: #333;<br/>}<br/> <br/>/* ONLY the ::after */<br/>[tooltip]:not([flow])::after,<br/>[tooltip][flow^="up"]::after {<br/>    bottom: calc(100% + 5px);<br/>}<br/> <br/>/* Both ::before & ::after */<br/>[tooltip]:not([flow])::before,<br/>[tooltip]:not([flow])::after,<br/>[tooltip][flow^="up"]::before,<br/>[tooltip][flow^="up"]::after {<br/>    left: 50%;<br/>    transform: translate(-50%, -.5em);<br/>}<br/>

Down:

[tooltip][flow^="down"]::before {<br/>    top: 100%;<br/>    border-top-width: 0;<br/>    border-bottom-color: #333;<br/>}<br/> <br/>[tooltip][flow^="down"]::after {<br/>    top: calc(100% + 5px);<br/>}<br/> <br/>[tooltip][flow^="down"]::before,<br/>[tooltip][flow^="down"]::after {<br/>    left: 50%;<br/>    transform: translate(-50%, .5em);<br/>}<br/>

Left:

[tooltip][flow^="left"]::before {<br/>    top: 50%;<br/>    border-right-width: 0;<br/>    border-left-color: #333;<br/>    left: calc(0em - 5px);<br/>    transform: translate(-.5em, -50%);<br/>}<br/> <br/>[tooltip][flow^="left"]::after {<br/>    top: 50%;<br/>    right: calc(100% + 5px);<br/>    transform: translate(-.5em, -50%);<br/>}<br/>

Right:

[tooltip][flow^="right"]::before {<br/>    top: 50%;<br/>    border-left-width: 0;<br/>    border-right-color: #333;<br/>    right: calc(0em - 5px);<br/>    transform: translate(.5em, -50%);<br/>}<br/> <br/>[tooltip][flow^="right"]::after {<br/>    top: 50%;<br/>    left: calc(100% + 5px);<br/>    transform: translate(.5em, -50%);<br/>}<br/>

7、对所有事物进行动画处理

动画是很神奇的。动画可以做到：

• 让用户感觉舒服

• 让用户感受到你的用户界面的空间感

• 注意到该看到的东西

• 让用户界面中本来非黑即白的生硬效果变得柔和

我们的提示框属于最后那一种。如果仅仅是让一个文字泡泡出现然后突然消失，效果是不令人满意的，我们可以让它更柔和一些。

@keyframes

我们需要两个关键帧 (@keyframe) 动画。向上/向下提示框要用到tooltips-vert关键帧，而向左/向右提示框使用tooltips-horz关键帧。 注意，在这些关键帧中，我们只定义了提示框所需的终止状态。

我们并不需要知道它们从何处来 (提示框本身就有状态信息)。我们只想控制它们要到哪儿去。

@keyframes tooltips-vert {<br/>  to {<br/>    opacity: .9;<br/>    transform: translate(-50%, 0);<br/>  }<br/>}<br/> <br/>@keyframes tooltips-horz {<br/>  to {<br/>    opacity: .9;<br/>    transform: translate(0, -50%);<br/>  }<br/>}<br/>

现在，当用户将鼠标悬停在触发元素(带有[tooltip]属性的元素)上时，我们需要将这些关键帧应用于工具提示。由于我们正在使用各种流来控制工具提示的显示方式，所以我们需要在样式中确定这些可能性。

使用:hover将控制传递给动画

[tooltip]:not([flow]):hover::before,<br/>[tooltip]:not([flow]):hover::after,<br/>[tooltip][flow^="up"]:hover::before,<br/>[tooltip][flow^="up"]:hover::after,<br/>[tooltip][flow^="down"]:hover::before,<br/>[tooltip][flow^="down"]:hover::after {<br/>    animation: <br/>        tooltips-vert <br/>        300ms <br/>        ease-out<br/>        forwards;<br/>}<br/> <br/>[tooltip][flow^="left"]:hover::before,<br/>[tooltip][flow^="left"]:hover::after,<br/>[tooltip][flow^="right"]:hover::before,<br/>[tooltip][flow^="right"]:hover::after {<br/>    animation: <br/>        tooltips-horz <br/>        300ms <br/>        ease-out <br/>        forwards;<br/>}<br/>

我们不能对display属性进行动画，但是可以通过操作opacity属性，在提示框上加上淡入效果。我们也可以动画transform属性，它可以给提示框加上微妙的动作，触发的元素就像飞入某点的一样。

主要forward关键词在动画的声明中，这告诉动画当完成时不重置，而是继续停留在结束。

效果如下：

更多编程相关知识，请访问：编程入门！！

以上がHTML+CSS を使用してアニメーション プロンプト ツールを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。