How to create CSS Tooltip for any website

 

Easy Use Of ToolTip Code!

A tooltip is a graphical user interface (GUI) element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it. The typical scenario for summoning a tooltip is to hover the mouse cursor over another GUI element such as a tool icon in software application, and it is also prevalently used in websites. A tooltip is also known as a hint, infotip or screentip. Depending on the application, the tooltip can display anything from the full name of the object the mouse is hovering on, to displaying additional information or a detailed explanation on what that tool or object does. For example, in Windows Explorer when hovering the mouse over a file, the details of that file such as the format type, size and date modified fields are displayed, and hovering the mouse over the local drive partition displays the free space and total size of the drive. Microsoft refers to their tooltips as "ScreenTips." They are called tooltips because they are usually implemented to provide contextual and usage information to the various tools in an application without having to consult lengthy manuals and other documentation. How a tooltip is implemented, whether it is a type of hover box or a separate window, is entirely up to the developer of the software. Some applications even use their tooltips as a menu for changing the settings of the tool the mouse is hovering on. Tooltips are commonly seen and implemented in desktop applications and not on mobile because there is no hover function for touch screens. However, Samsung was able to implement a hover function, and hence tooltips, on some of their mobile devices which used the S-Pen.

<!-- CSS Style CODE Start -->

  <style> .tooltip { position: relative; display: inline-block; border-bottom: 2px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 400px; background-color: blue; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; margin-left: -200px; padding:10px; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left:50%; margin-left: -55px; border-width: 5px; border-style: solid; border-color: blue transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } </style>

Hover over me: when you hold cursor on it , it will show tooltip box.

Tooltip text: it will show your written text .

Note: Sometimes Div can be seen separetely. That time you can use alternative (span) code. 

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

alternative:

<span class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</span>

Related Posts