タイトル属性をjsなしで使用するツールチップですか？

Question

ツールチップをtitle=""属性の:hoverから選択する別の解決策を探しています。

title=""属性を使用し、私のcontent:""プロパティを動的に変更する方法を見つけることを望みます。

* { 
 
    -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

それを行う方法はありますか？

Answer 1

使用data-属性カスタム属性が必要な場合、及びdata-ずに非カスタム属性（タイトル）を必要とする場合

* { 
 
    -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

Answer 2

私は、ツールチップの良い例があると思います：bootstrap

例：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>