不更改设计的HTML元素包装器

我正在编写一个firefox扩展，希望为输入字段创建一个HTML工具提示，就像这里已经问过的那个人一样：。根据答案，我还使用span元素来包装输入字段。但遗憾的是，这改变了主页的设计，我也尝试了div元素，但结果是一样的。是否有任何HTML元素可以用作包装器，并且根本不会改变设计

例如，当输入字段更改如下时，我可以为您提供gmail登录页面：

<span data-tooltip="testmessage">
    <input id="Passwd" type="password" placeholder="Password" name="Passwd"></input>
</span>

---

为什么不能将data tooltip=testmessage添加到输入元素中呢？只要它的语义span或div是好的选择，你就可以添加任何你想要的包装器，它的外观不是由元素本身定义的，而是由CSS定义的。Dead133：这在我发布的第一个链接中解释过。巴特杜德：但我认为为span元素定义的CSS不应该改变输入字段的大小。在最初的帖子中添加了CSS代码。问题是，没有保证不影响布局的包装方式，因为CSS几乎可以依赖于DOM元素的任何属性。示例：表单>输入将在任何包装器上停止，因为它直接在表单下搜索输入。您可能想在目标元素旁边添加一个元素：before/：after，将其定位为绝对并显示在hover thru JS上。Cedric Reichenbach：我想您遇到了我的问题，但不幸的是，我对JS编程非常陌生，所以请您解释一下，您可能想在目标元素旁边添加一个元素：before/：after，将其置于绝对位置，并通过JS显示悬停。再远一点？我真的不知道你说的是什么意思。

  span {
    position: relative;
  }

  span[data-tooltip]:before {
    content: attr(data-tooltip);
    font-size: 10px;
    position:absolute;
    z-index: 90099;
    white-space:nowrap;
    bottom:9999px;
    left: 50%;
    background:#000;
    color:#e0e0e0;
    padding:0px 7px;
    line-height: 24px;
    height: 24px;
    opacity: 0;
    transition:opacity 0.4s ease-out;
  }

  span[data-tooltip]:hover:before {
    opacity: 1;
    bottom:-35px;
  }