使用没有js的title属性的工具提示? [英] Tooltip using title attribute without js?
本文介绍了使用没有js的title属性的工具提示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在搜索很长一段时间后,在 title =属性上创建工具提示的另一个解决方案:
:hover
选择。
我希望找到一种使用 title =
属性的方法, $ c> content:
* {-webkit-font-smoothing:antialiased; font-family:Trebuchet MS,Helvetica,sans-serif;} div {width:300px; position:absolute; top:50%;左:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%);} button {cursor:pointer;位置:相对; display:inline-block; background:rgb(25,181,206); color:#fff; padding:5px 15px; border:none; font-size:1em;} button :: after {content:I'm a css tooltip!; / *< =动态标题内容* / z-index:-999; position:absolute;顶部:110%;左:0;宽度:90%; padding:5px 5%; font-size:70%; text-align:center; color:#fff; background:rgb(21,151,171);不透明度:0; -webkit-transform:rotateX(180deg)rotateY(20deg)rotateZ(20deg); -moz-transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); -o-transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); -ms-transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); -webkit-transform-origin:100%0%;转化来源:100%0%; -webkit-backface-visibility:hidden; backface-visibility:hidden;过渡:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -webkit-转换:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -moz-转变:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -ms-转换:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -o-transition:cubic-bezier(0.3,0.05,0.4,1.7).55s;} button:hover :: after {opacity:1; box-shadow:0px 2px 3px 0px rgba(0,0,0,0.15); -webkit-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); -moz-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); -o-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); -ms-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);}
< div> < button title =我是css tooltip1!>按钮< / button> < button title =我是css tooltip2!>按钮< / button> < button title =I'm a css tooltip3!> button< / button>< / div>
p>
有办法吗?
解决方案
data -
属性,如果您需要自定义属性,如果您需要非自定义属性(例如title),则不包含 data -
/ p>
* {-webkit-font-smoothing:antialiased; font-family:Trebuchet MS,Helvetica,sans-serif;} div {width:300px; position:absolute; top:50%;左:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%);} button {cursor:pointer;位置:相对; display:inline-block; background:rgb(25,181,206); color:#fff; padding:5px 15px; border:none; font-size:1em;} button :: after {content:attr(data-title); / *< =动态标题内容* / z-index:-999; position:absolute;顶部:110%;左:0;宽度:90%; padding:5px 5%; font-size:70%; text-align:center; color:#fff; background:rgb(21,151,171);不透明度:0; -webkit-transform:rotateX(180deg)rotateY(20deg)rotateZ(20deg); -moz-transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); -o-transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); -ms-transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); transform:rotateX(180deg)rotateY(0deg)rotateZ(0deg); -webkit-transform-origin:100%0%;转化来源:100%0%; -webkit-backface-visibility:hidden; backface-visibility:hidden;过渡:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -webkit-转换:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -moz-转变:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -ms-转变:立方贝塞尔(0.3,0.05,0.4,1.7).55s; -o-transition:cubic-bezier(0.3,0.05,0.4,1.7).55s;} button:hover :: after {opacity:1; box-shadow:0px 2px 3px 0px rgba(0,0,0,0.15); -webkit-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); -moz-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); -o-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); -ms-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg); transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);}
< div> < button data-title =我是css tooltip1!>按钮< / button> < button data-title =我是css tooltip2!>按钮< / button> < button data-title =我是css tooltip3!>按钮< / button>< / div>
I'm searching a long time after another solution for making tooltip from
title=""
attribute on:hover
selection.I hope to find a way for using
title=""
attribute and change mycontent:""
property dynamically.* { -webkit-font-smoothing: antialiased; font-family: "Trebuchet MS", Helvetica, sans-serif; } div { width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } button { cursor: pointer; position: relative; display: inline-block; background: rgb(25, 181, 206); color: #fff; padding: 5px 15px; border: none; font-size: 1em; } button::after { content: "I'm a css tooltip!"; /* <= dynamically title content */ z-index: -999; position: absolute; top: 110%; left: 0; width: 90%; padding: 5px 5%; font-size: 70%; text-align: center; color: #fff; background: rgb(21, 151, 171); opacity: 0; -webkit-transform: rotateX(180deg) rotateY(20deg) rotateZ(20deg); -moz-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -webkit-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -moz-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -ms-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -o-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; } button:hover::after { opacity: 1; box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
<div> <button title="I'm a css tooltip1!">button</button> <button title="I'm a css tooltip2!">button</button> <button title="I'm a css tooltip3!">button</button> </div>
There is a way to do that?
解决方案Use
data-
attribute if you need custom attributes, and withoutdata-
if you need non custom attributes (eg title)* { -webkit-font-smoothing: antialiased; font-family: "Trebuchet MS", Helvetica, sans-serif; } div { width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } button { cursor: pointer; position: relative; display: inline-block; background: rgb(25, 181, 206); color: #fff; padding: 5px 15px; border: none; font-size: 1em; } button::after { content: attr(data-title); /* <= dynamically title content */ z-index: -999; position: absolute; top: 110%; left: 0; width: 90%; padding: 5px 5%; font-size: 70%; text-align: center; color: #fff; background: rgb(21, 151, 171); opacity: 0; -webkit-transform: rotateX(180deg) rotateY(20deg) rotateZ(20deg); -moz-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -webkit-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -moz-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -ms-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; -o-transition: cubic-bezier(0.3, 0.05, 0.4, 1.7) .55s; } button:hover::after { opacity: 1; box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.15); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
<div> <button data-title="I'm a css tooltip1!">button</button> <button data-title="I'm a css tooltip2!">button</button> <button data-title="I'm a css tooltip3!">button</button> </div>
这篇关于使用没有js的title属性的工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文