tip是当鼠标放到控件上显示的提示文本，下面说下实现思路
方法一：
使用hover:before，hover:after组合一个三角符号和一个圆角矩形实现，以右三角为例
.jgui-tip:after {
content: attr(data-tip);
visibility: hidden;
position: absolute;
padding: 5px 10px;
right: -10px;
transform:translateX(100%);
bottom: 50%;
margin-left: 12px;
font-size: 16px;
background: #000;
color: #fff;
cursor: default;
border-radius: 5px;
line-height: 20px;
}
.jgui-tip:before {
content: " ";
position: absolute;
visibility: hidden;
right: -10px;
bottom: 50%;
margin-bottom: 5px;
width:;
height:;
border-left: 5px solid transparent;
border-right: 5px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid #000;
}
.jgui-tip:hover:before,
.jgui-tip:hover:after {
visibility: visible;
}
<button class="jgui-btn jgui-tip" data-tip="测试右方弹出三角提示框(不支持IE8)" id="test">button</button>
显示效果如下
看起来效果不错，可惜不支持IE8，最开始以为是，z-index无效，改变z-index无法解决，经过查找资料，增加一个
overflow: visible;可显示了
.jgui-btn {
position: relative;
display: block;
width: 200px;
font-size: 20px;
cursor: pointer;
overflow: visible;
}
但是会默认按钮会变色，这个回头统一定按钮样式即可解决,而且影响按钮的默认overflow属性。
总结下：
1、button一个:after实现一个tip，
2、超出被遮挡问题：在ie下，button需要加一个overflow:visible
3、如果将button换成 a标签不需要加，在chrome浏览器下，可以不加overflow:visible,都显示正常
网上关于伪元素与z-index的一篇总结
父元素不设置z-index值，伪元素设置负z-index 值，父元素位移效果不使用transform，简单说下原因。
- 同一个层叠上下文里面, 层叠顺序从后向前依次是: 背景和边框、负z-index、块级盒、浮动盒、行内盒、z-index:0、正z-index.
- 伪元素相当于子元素，也就是包含在元素内的，二者不在同一个层叠上下文中。
如果想实现层叠效果，需要元素和对应的伪元素在同一层叠上下文中，所以不能让元素创建层叠上下文。以下情况会创建层叠上下文
- 即便是
position不为static的元素, 如果没有指定一个非auto值的z-index, 该元素就不会建立一个层叠上下文。 - 元素的
transform值不是none。
当然还有其他情况本文就不列出了，因为transform 会创建层叠上下文，所以缓动的时候只能使用top 进行变换了。
原地址：https://fatesinger.com/100258
方法二：mouseover,mouseout事件。
代码如下，此方法比较麻烦，不适合动态创建的元素。
.jgui-tipinfo
{
display:none;
z-index:999;
position:absolute;
background:#222;
padding:5px 10px;
color: #fff;
border-radius: 5px;
font-size: 16px;
line-height: 20px;
}
<script type="text/javascript">
function ShowTip(event,obj,tipinfo)
{
$('body').append( '<div id="tipinfo" class="jgui-tipinfo">'+tipinfo+'</div>');
$('#tipinfo').css("top", $(obj).position().top+$(obj).height()/2 + "px").css("left", $(obj).position().left+$(obj).width()+"px").fadeIn("slow");
}
function HideTip()
{
$("#tipinfo").fadeOut("slow").remove();
}
</script>
<button class="jgui-btn" onmouseover="ShowTip(event,this,'测试弹出tooltip(支持IE8)')" onmouseout="HideTip()">button2</button>
三、经过界面优化，以上两种方法，最终显示效果如下，后面将封装成支持左右上下四个位置的tip控件。
演示地址：www.jgui.com