本代码可以实现如下情况:
1、js实现title是为了解决自定义样式和格式!
2、希望传入的格式可以不限制是否包含html结构!
3、可以自定义显示层的位置!
js如下:
function GetAbsoluteLocation(element) { if ( arguments.length != 1 || element == null ) { return null; } var offsetTop = element.offsetTop; var offsetLeft = element.offsetLeft; var offsetWidth = element.offsetWidth; var offsetHeight = element.offsetHeight; while( element = element.offsetParent ) { offsetTop += element.offsetTop; offsetLeft += element.offsetLeft; } return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, offsetWidth: offsetWidth, offsetHeight: offsetHeight }; } function cerateDiv(array,obj){ var pos = GetAbsoluteLocation(obj); var temp = ''; temp +='<div id="hover_tip_toolTip" style="border-top:1px solid #e20f10;border-left:1px solid #e20f10;border-right:1px solid #e20f10;background:#11161b;width:148px;height:auto;position:absolute;left:'+ (pos.absoluteLeft+pos.offsetWidth+5) +'px'+';top:'+ pos.absoluteTop +'px;">' temp += array; temp += '</div>'; $('body').append(temp); obj.onmouseout = function(){ $('#hover_tip_toolTip').remove(); } }
使用方式:
<a href="javascript:;" class="evt_comon_icon evicon11 block" onmouseover="cerateDiv('<p>名称:计都</p><p>触发条件:每施放一个技能(普通攻击除外)</p><p>技能效果:触发BUFF,持续数秒,叠加至一定层数后,伤害提高,持续数秒,触发一次</p>',this)"></a>
来源:https://www.cnblogs.com/shizhouyu/p/4661783.html