显示文本html / css的悬停按钮

Question

我正在学习HTML＆amp; 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

标题是最简单的不太漂亮的解决方案......

其他方法是隐藏子工具提示元素仅在悬停时显示。

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 2

只需使用title属性

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

Answer 3

title属性当然是最明显的。

另一个基于属性的解决方案是使用自定义解决方案并使用伪显示它，您可以在其中设置更多样式。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;