Sunday , November 27 2022

CSS Tooltip Code


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

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

.tooltip .tooltiptext::after {
  content: “”;
  position: absolute;
  top: 100%;
  margin-left: -55px;
  border-width: 5px;
  border-style: solid;
  border-color: blue transparent transparent transparent;

.tooltip:hover .tooltiptext {
  visibility: visible;


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>


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

Check Also

Disable text selection in websites or your Blogs│Copy Protect

Disable text selection in your wordpress or blogger sites Your Website content is most valuable …

CSS Animation Slide From TOP │ Bottom │ Left │ Right │ Zoom │ Fade in │ Opacity │with Css Spin Animation Code

CSS Animation Css Animation Slide From Top This type of css help you to make …

CSS swing Effect Code

CSS swing Effect Code <style>.swing {    animation: swing ease-in-out 1s infinite alternate;    transform-origin: center -20px;    …

CSS Multi-column Properties

Multi-column 2 .text-col2 {  column-count: 2;  column-gap: 20px;  column-rule: 1px solid lightblue;} Preview: Lorem ipsum …

CSS hover effects buttons

  প্রথমে একটু পরিচয় হয়ে নিন  হোভার কি এবং এটা কিভাবে কাজ করে  ? হোভার …

ওয়েব ডিজাইন এর সম্পূর্ন বাংলা আলোচনা পর্ব – ২丨সম্পূর্ন ফ্রিতে কিভাবে একটি ওয়েবসাইট বানাবেন ?丨How to make a website completely free ?

ওয়েব ডিজাইন এর সম্পূর্ন বাংলা আলোচনা পর্ব – ২ এ পর্বে আমরা দেখে নেবো কিভাবে …

ওয়েব ডিজাইন এর সম্পূর্ন বাংলা আলোচনা পর্ব – ১

Web Design Bangla Lesson Part 01 লেখাপড়া তো চলবেই সেই সাথে চাকরির প্রতিযোগিতা আর ক্যারিয়ার …

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments