テキストを表示するホバーボタンhtml/css

Question

私はHTML & CSSを学んでいます。今私はtooltip機能のようなテキストを表示するホバーボタンを作ろうとしています。どのように私はそれがここから実現することができます。

<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=2"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<style> 
    /*TEST HERE*/ 
    .w3-button {width:800px;} 
    .w3-button {height:800px;} ` 
</style> 
<div class="w3-container"> 
    <h2>TITULO AQUI</h2> 
    <p> 
     <button class="w3-button w3-light-blue">Hover in here</button> 
    </p> 
</div> 
/*<div id="button1"></div>*/ 

Answer 1

title属性を使用します。

もう1つの属性ベースのソリューションでは、カスタムのソリューションを使用して、擬似で表示しています。

button[data-title] { 
 
    position: relative; 
 
    transition: opacity 1s; 
 
} 
 
button[data-title]::after { 
 
    content: attr(data-title); 
 
    position: absolute; 
 
    left: 50%; top: 50%; 
 
    transform: translate(-50%,-150%); 
 
    background: gray; 
 
    color: lightgreen; 
 
    padding: 10px; 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 
button[data-title]:hover::after { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<style> 
 
    /*TEST HERE*/ 
 
    .w3-button {width:200px;} 
 
    .w3-button {height:150px;} ` 
 
</style> 
 
<div class="w3-container"> 
 
    <h2>TITULO AQUI</h2> 
 
    <p> 
 
     <button class="w3-button w3-light-blue" data-title="I'm being hovered">Hover in here</button> 
 
    </p> 
 
</div>

Answer 2

タイトルは最も簡単な非常にきれいではないソリューションです...

他の方法は、唯一のホバーに示す子tooltip要素を隠されていることです。

div { 
 
    border: 1px solid; 
 
    padding: 2px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.tooltip { 
 
    opacity: 0; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    left: 100%; 
 
    width: 150px; 
 
    transition: opacity .5s; 
 
    padding: 1px; 
 
    margin: 0 2px; 
 
    top: 0; 
 
    border: 1px solid #000; 
 
    background: rgba(0, 0, 0, .7); 
 
    color: #FFF; 
 
} 
 

 
.hoverTooltip:hover .tooltip { 
 
    opacity: 1; 
 
}

<div title='Here is "native" tooltip'>"native" tooltip via title</div> 
 
<br /><br /> 
 
<div class="hoverTooltip"> 
 
    hover element tooltip 
 
    <span class="tooltip">Here is your custom styled tooltip</span> 
 
</div>

Answer 3

だけtitle属性はもちろん、最も明白である

<button class="w3-button w3-light-blue" title="this is a title">Hover in here</button>