Tooltips

A electric scooter parked in the open parking area

Intro:

Tooltips are brief labels that display information about a specific user interface element. They appear when the element is hovered over, focused on, tapped, or clicked by the user.

Example

Icon Tooltip

hover the mouse over the info icon

Code behind Example:
<!-- add link in head --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <!-- add the icon in the body where you want --> <h2>Icon Tooltip</h2> <p>hover the mouse over the info icon <i class="fa fa-info-circle" aria-hidden="true"> <span class="tooltiptext">Information</span></i></p>

Html:

body{text-align: center;} .fa-info-circle { position: relative; margin-left: 10px; } .fa-info-circle .tooltiptext { visibility: hidden; width: 120px; background-color: #191b1a; color: whitesmoke; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; bottom: 100%; left: 50%; margin-left: -60px; } .fa-info-circle:hover .tooltiptext { visibility: visible; }

Css: