本页演示如何使用 tooltip include 标签。
用法
工具提示允许您添加仅当读者将鼠标悬停在某些锚文本上时才显示的文本。
{% include tooltip text="This is the anchor text that will be displayed." tooltip="I'm a tooltip!" %}This is the anchor text that will be displayed.I’m a tooltip!
造型
可选的 style 可以应用于锚文本。
{% include tooltip text="Here is some blue anchor text." tooltip="Non-blue tooltip" style="color:#7070ff;" %}Here is some blue anchor text.Non-blue tooltip
位置
工具提示在锚文本的右侧向下对齐，但在某些情况下，最好选择不同的位置。例如：
<div style="text-align: right">
{% include tooltip width="350px" text="Bad" tooltip="This tooltip, unfortunately, goes off the right-hand side of the screen, because we didn't take steps to position it differently." %}
</div>
BadThis tooltip, unfortunately, goes off the right-hand side of the screen, because we didn't take steps to position it differently.
但我们可以使用 left 属性来修复它：
<div style="text-align: right">
{% include tooltip width="350px" left="-320px" text="Good" tooltip="This tooltip, fortunately, does not go off the right-hand side of the screen, because we took steps to position it differently." %}
</div>
GoodThis tooltip, fortunately, does not go off the right-hand side of the screen, because we took steps to position it differently.
同样，top属性可用于控制工具提示的垂直位置。
<div style="text-align: center">
{% include tooltip top="-2em" text="Vertical override" tooltip="Rarely needed, but good to know!" %}
</div>
Vertical overrideRarely needed, but good to know!
长度
默认情况下，短工具提示呈现在单行上，而较长的工具提示（48 个字符或更多）的固定宽度为 20em：
{% include tooltip text="Here's a long tooltip with default width." tooltip="Uh oh I have so much to say... should I really put it all in a tooltip? Sure, let's go ahead and do it, just to demonstrate what it looks like." %}Here’s a long tooltip with default width.Uh oh I have so much to say… should I really put it all in a tooltip? Sure, let’s go ahead and do it, just to demonstrate what it looks like.
但您可以设置 width 参数来覆盖它：
{% include tooltip width="16em" text="Here's the same tooltip but 16em wide." tooltip="Uh oh I have so much to say... should I really put it all in a tooltip? Sure, let's go ahead and do it, just to demonstrate what it looks like." %}Here’s the same tooltip but 16em wide.Uh oh I have so much to say… should I really put it all in a tooltip? Sure, let’s go ahead and do it, just to demonstrate what it looks like.
