HTML5：在光標附近顯示提示文字

Question

我正在尋找一種顯示隨光標移動的文本（提示）的方法。 有沒有辦法用GWT或原生HTML5做到這一點？

Answer 1

有直接CSS和HTML做工具提示（如果這就是你想要的）的能力。

Linky.

我不能肯定我以前用過這個，但代碼將是這樣的：

HTML

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

CSS

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

Here's a jsFiddle to play with.

Answer 2

在GWT中，創建一個CSS樣式爲「position：absolute」的標籤。將一個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); 
    } 
} 

Answer 3

只需使用HTML 冠軍屬性在所有的HTML標籤是這樣的：

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