HTML标题属性样式

Question

如何在不使用javascript或CSS的情况下更改以下标记中title属性的样式,因为我将HTML插入到其他不可编辑的doc中的特定位置.

    <span title = "This is information"> This is a test
    </span>

Answer 1

https://jsfiddle.net/LvjaxLfn/

<span aria-label="This is information">This is a test</span>

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
     content: attr(aria-label);
     padding: 4px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     white-space: nowrap;
     z-index: 20;
     background:red;
}

2017年12月14日更新

出现这个显示2个标题,另一个可能是:

https://jsfiddle.net/LvjaxLfn/153/

span {
  position: relative;
  cursor: pointer;
}

span[aria-label]:after {
  opacity:0;
  content: attr(aria-label);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  background:red;
  transition: opacity 0.5s;
  pointer-events:none;
}

span[aria-label]:hover:after {
  opacity:1;
  transition-delay:1.5s;
}

使用aria标签来保持可访问性