用 css 实现 tooltips

前提是只兼容现代浏览器。

原理

主要用的原理：

  • 创建一个标签，然后在标签内加上一个属性 data-[] = “ToolTip”,[]表示的是自定义的属性名称，引号里面是tooltip需要显示的内容。
  • 给标签加样式，position设置为relative，因为之后伪元素需要设置绝对定位来设置位置。
  • 给after加样式，after是需要显示的tooltip，通过content: attr(data-tip);拿到需要显示的内容，设置绝对定位，调整位置。
  • 给before加样式，before需要设置成一个小三角tip放在after下面。
  • 给after/before的display都设置为none。
  • 给需要tooltip的元素伪类选择hover时设置after/before的display为block，这里需要注意的是after/before默认display为inline，所以我们前面创建调试是display应该先设置为block。

对于不支持伪元素的IE6/7

var $beforeAfter = function(dom) {
    if (document.querySelector || !dom && dom.nodeType !== 1) return;
    var content = dom.getAttribute("data-content") || '';
    var before = document.createElement("before")
        , after = document.createElement("after");
    before.innerHTML = content;
    after.innerHTML = content;
    dom.insertBefore(before, dom.firstChild);
    dom.appendChild(after);
};

库参考