css jquery工具,JQuery和CSS3移动工具提示

提示工具是一个不错的发明。小细节在网页设计中扮演着重要的角色在用户体验方面。通常,使用提示工具显示少量隐藏的内容(主要是说明,所谓的技巧),用户移动光标时,会弹出或点击(不常见)一个特别的目标。CSS #tooltip{ text-align: center; color: #fff; background: #111; position: absolute; z-index: 100; padding: 15px;} #tooltip:after /* triangle decoration */ { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #111; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } #tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #111; top: -20px; bottom: auto; } #tooltip.left:after { left: 10px; margin: 0; } #tooltip.right:after { right: 10px; left: auto; margin: 0; }Javascript$( document ).ready( function(){ var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); tooltip = $( '

UX