<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style type="text/css"> [data-tip] { position: relative; } [data-tip]:after, [data-tip]:before { position: absolute; z-index: 100; visibility: hidden; opacity: 0; transition: all .3s linear; } [data-tip]:before { content: ""; } [data-tip]:after { content: attr(data-tip); color: #fff; font-size: 13px; background: #f1f1f1; padding: 5px 10px; text-align: left; background: #222; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*width: 200px;*/ /*max-width: 200px;*/ z-index: 999999999; display: block; line-height: 15px; white-space: nowrap; overflow: hidden; } [data-tip].tip-left:after { left: 0; } [data-tip].tip-left:before { left: 10px; } [data-tip].tip-top:after { bottom: 100%; margin-bottom: 10px; } [data-tip].tip-top:before { border-top: 7px solid #000; border-bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; top: -10px; } [data-tip].tip-center:after { left: 50%; margin-left: -100px; } [data-tip].tip-center:before { left: 50%; margin-left: -7px; } [data-tip]:hover:after, [data-tip]:hover:before { visibility: visible; opacity: 1; } </style> </head> <body style="padding-top:300px"> <span class="tip-left tip-top" data-tip="奥迪A5 2016款 改款 Sportback 35 TFS 进取型奥迪A5 2016款 改款 Sportback 35 TFS 进取型"> <a href="javascript:void(0);" class="name">奥迪A5 2016款 改款 Sportback 35 TFS 进取型</a> </span> <a href="javascript:void(0);" class="name tip-left tip-top" data-tip="奥迪A5 2016款 改款 Sportback 35 TFS 进取型奥迪A5 2016款 改款 Sportback 35 TFS 进取型">奥迪A5 2016款 改款 Sportback 35 TFS 进取型</a> </body> </html> 提示：你可以先修改部分代码再运行。 再来一个 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Quick CSS3 tooltips (No images, no js)</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Raleway:200,200i,400,400i,500,500i,700,700i'); /*tipped element. should be inline-block or block*/ .qtip { display: inline-block; position: relative; cursor: pointer; color: #3bb4e5; border-bottom: 0.05em dotted #3bb4e5; box-sizing: border-box; font-style: normal; transition:all .25s ease-in-out } .qtip:hover {color:#069;border-bottom:0.05em dotted #069} /*the tip*/ .qtip:before { content: attr(data-tip); font-size: 14px; position: absolute; background: rgba(10, 20, 30, 0.85); color: #fff; line-height: 1.2em; padding: 0.5em; font-style: normal; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); min-width: 120px; text-align: center; opacity: 0; visibility: hidden; transition: all .3s ease-in-out; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); font-family: sans-serif; letter-spacing: 0; font-weight: 600 } .qtip:after { width: 0; height: 0; border-style: solid; content: ''; position: absolute; opacity: 0; visibility: hidden; transition: all .3s ease-in-out } .qtip:hover:before, .qtip:hover:after { visibility: visible; opacity: 1 } /*top*/ .qtip.tip-top:before { top: 0; left: 50%; transform: translate(-50%, calc(-100% - 8px)); box-sizing: border-box; border-radius: 3px; } .qtip.tip-top:after { border-width: 8px 8px 0 8px; border-color: rgba(10, 20, 30, 0.85) transparent transparent transparent; top: -8px; left: 50%; transform: translate(-50%, 0); } /*bottom*/ .qtip.tip-bottom:before { bottom: 0; left: 50%; transform: translate(-50%, calc(100% + 8px)); box-sizing: border-box; border-radius: 3px; } .qtip.tip-bottom:after { border-width: 0 8px 8px 8px; border-color: transparent transparent rgba(10, 20, 30, 0.85) transparent; bottom: -8px; left: 50%; transform: translate(-50%, 0); } /*left*/ .qtip.tip-left:before { left: 0; top: 50%; transform: translate(calc(-100% - 8px), -50%); box-sizing: border-box; border-radius: 3px; } .qtip.tip-left:after { border-width: 8px 0 8px 8px; border-color: transparent transparent transparent rgba(10, 20, 30, 0.85); left: -8px; top: 50%; transform: translate(0, -50%); } /*right*/ .qtip.tip-right:before { right: 0; top: 50%; transform: translate(calc(100% + 8px), -50%); box-sizing: border-box; border-radius: 3px; } .qtip.tip-right:after { border-width: 8px 8px 8px 0; border-color: transparent rgba(10, 20, 30, 0.85) transparent transparent; right: -8px; top: 50%; transform: translate(0, -50%); } /*some styles for this example*/ body { background: #3bb4e5 } .container { padding: 1.5em; margin: 3em auto; background: #fff; position: relative; max-width: 720px; font-size: calc(2vmin + 12px); line-height: 1.5em; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); font-weight: 500; text-align:center; font-family:'Raleway', sans-serif } .container p {margin:0 auto 0.8em} .container h1 { text-align: center;font-family: monospace, serif; line-height:1em; color: #d40; margin:0 auto 0.5em; font-size: 2.5em; } code { color: #3bb4e5; font-size: 0.8em; padding: 1em; background: rgb(10,20,30); display: block; text-align:left; } .hl { color: #eb1777 } .qcontent { color: #ff0; font-weight: bold } .qclass { color: #dd0; font-weight: bold } </style> </head> <body> <div class="container"> <h1>Quick <i class="qtip tip-top" data-tip="Well, tips, you know. To explain that thing below ↓">tips</i></h1> <p>I am a simple CSS3-powered <i class="qtip tip-top" data-tip="weee!">tooltip</i>.</p> <p>I can be on <i class="qtip tip-top" data-tip="Here it comes right on top!">top</i>, on the <i class="qtip tip-right" data-tip="Right, finally">right</i>, <br/><i class="qtip tip-left" data-tip=" Left, that's right">left</i> and, of course, on the <i class="qtip tip-bottom" data-tip="Yeah, bottom">bottom</i>.</p> <p>Add CSS from this pen, the markup will look like this:</p> <code> <span class="hl"><i class="<span class="qclass">qtip tip-top</span>" data-tip="<span class="qcontent">Tip content</span>"></span><br/>Any text / image / element<br /><span class="hl"></i></span><br/><br/> Available options: <span class="qclass">.tip-top</span>, <span class="qclass">.tip-left</span>, <span class="qclass">.tip-right</span> or <span class="qclass">.tip-bottom</span> </code> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 兼容到ie8的title样式 喜欢 (0)or分享 (0)
