HTML元素包装器，不会改变设计

Question

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

作为示例，当输入字段更改如下时，我可以为您提供gmail登录页面（https://accounts.google.com/ServiceLogin?service=mail）：

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

然后密码字段比没有跨度包装器时短。

这是CSS代码：

  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;
  }