使用没有js的title属性的工具提示？ [英] Tooltip using title attribute without js?

问题描述

我正在搜索很长一段时间后，在 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>   
 
 
  Jsfiddle链接 
 
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 my content:"" 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>





Demo

There is a way to do that?
解决方案
Use data- attribute if you need custom attributes, and without data- 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>





Jsfiddle link

                        
这篇关于使用没有js的title属性的工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！