html - HTML5：在光标附近显示提示文本

Question

我正在寻找一种显示随光标移动的文本（提示）的方法。有没有办法用 GWT 或原生 HTML5 来做呢？

Answer 1

只需在任何 html 标签中使用 HTML title属性，如下所示：

<p title="I'm giving you a hint!">text</p>

Answer 2

可以使用直接的 CSS 和 HTML 制作工具提示（如果您正在寻找的话）。

林奇。

我不能确认我以前用过这个，但代码是这样的：

HTML

<p>I <span data-tooltip=", really" class="tooltip">really</span> like pie.</p>​

CSS

.tooltip:hover:after { content: attr(data-tooltip); }

这是一个可以玩的jsFiddle。

Answer 3

在 GWT 中，创建一个具有 CSS 样式“位置：绝对”的标签。将 MouseMoveHandler 附加到它。在此处理程序中，将标签的位置设置在光标旁边。当您希望它出现时，不要忘记将此标签添加到您的视图中。

Label label = new Label("My hint that moves");
label.getElement().getStyle().setPosition(Position.ABSOLUTE);

label.addMouseMoveHandler(new MouseMoveHandler() {
    @Override
    public void onMouseMove(MouseMoveEvent event) {
        label.getElement().getStyle().setTop(event.getClientY(), Unit.PX);
        label.getElement().getStyle().setLeft(event.getClientX(), Unit.PX);
    }
}