指向每一行形状的箭头

Question

在我的网站注册表单中，我想为我的表单制作一个工具提示，但我想要一个由css3构建的箭头。我对如何做这种事一无所知。

本质上，当input:focus时，一个三角形（用CSS3渲染）会在转换中向上或向下移动，指向该输入文本字段。这可行吗？怎样非常感谢。

我想让它完全脱离CSS，而不是jQuery或JavaScript。我尽量避免使用JavaScript，以免使用带宽。

Answer 1

您可以通过边界相对轻松地创建三角形。这个演示可能是我在这个主题上最喜欢的，它在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(/bfocusb/, '');
});