指向每一行表單的箭頭

Question

在我的網站註冊表單中，我想爲我的表單創建一個工具提示類型的事物，但我想要一個由css3構建的箭頭。我沒有模糊的線索如何做這種事情。

本質上，當輸入：焦點時，一個三角形（用CSS3呈現）會在一個轉換中向上或向下移動，以指向該輸入文本字段。這是可行的嗎？怎麼樣？謝謝。

我想使它完全出於CSS，而不是jQuery或JavaScript。我儘量避免使用JavaScript，以免使用帶寬。

Answer 1

您可以通過邊框相對容易地做三角形。 This demo可能是我最喜歡的主題，它通過在CSS中創建聊天/工具提示泡泡。

你可以得到很多比這更創意，雖然：http://jsfiddle.net/czuxH/

我不會太擔心切割出的JavaScript的最小片段節省帶寬 - 它只是文字，並適當微細化以及gzip壓縮它真的帶寬並不多。您將需要JS來觸發動畫並定位箭頭（儘管您可以使用CSS3動畫進行轉換）。

Answer 2

你不能做到嚴格沒有JavaScript，因爲選擇合併:focus只能選擇後代元素超出:focus僞選擇器，input元素空元素。您也不能使用僞元素，因爲input元素是替換爲元素。

你可以用觸摸的JavaScript來添加事件上的元素。

var input = document.getElementsByName('some_input')[0], 
    parent = input.parentNode, 
    bubble = document.createElement('div'); 

bubble.className = 'bubble'; 
bubble.textContent = 'Your text.'; 
parent.appendChild(bubble); 

input.addEventListener('focus', function() { 
    parent.className += ' focus'; 
}); 

input.addEventListener('blur', function() { 
    parent.className = parent.className.replace(/\bfocus\b/, ''); 
});