在win10上html title属性显示的位置与win7上相反

html 的title attribute用来作为tooltip来显示提示。在win7上的IE浏览器上显示时，它的位置显示在文本的下方，而在win10上显示时却显示在文本的上方做提示。测试了IE11和edge都是同样的问题，不过在win10上使用其他浏览器如chrome,仍然能如以前的显示方法显示提示在文本下方。这种小变化都有可能以前我们产品的设计浏览器兼容性问题。如原先设计为当用户鼠标移到一个a链接时，除了显示tooltip提示信息外，还需要显示一个自定义的一个工具框，如在这个工具框中显示一个快速链接。在之前这个工具框设计在文本链接上方（因为title提示框显示在文件链接下方），这一上一下设计正好解决需求，可是到win10上就都到了上方，有了重叠问题。啃爹了吧。

http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag

一种解决方案是：

先使用自定义属性data-title替代title，然后使用css来实现title功能。

复制上文提供的html

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#" data-title="Hello, i am a link">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#" data-title="This is another link">Mauris placerat</a> eleifend leo.</p>

复制上文提供的css

a[data-title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

效果如下：

提供快速链接：http://jsfiddle.net/tDQWN/129/

好吧，我们顺便在来扯远点吧。

既然默认的title行为被浏览器控制了，我们似乎没有办法直接去更改；那我们可以使用其他方法来替换title属性来实现提示信息。

另一种解决方法:

html

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

CSS:

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}