Tooltips are used to display additional information when hovering over an element. The w3-tooltip class makes this easy.
<div class="w3-tooltip">
<span class="w3-text w3-tag w3-light-grey w3-border">Tooltip Text</span>
<button class="w3-button w3-blue">Hover me</button>
</div>
Customize the tooltip position with the w3-left, w3-right, or w3-top classes:
<div class="w3-tooltip">
<span class="w3-text w3-tag w3-border w3-right">Tooltip on the right</span>
<button class="w3-button w3-teal">Hover me</button>
</div>