CSS Tooltips

Developer
Alan Shortis
Size
3,836 Kb
Views
14,168
  1. CSS Tooltips Previews
  2. CSS Tooltips HTML Codes
  3. CSS Tooltips CSS Codes

How do I make an css tooltips?

What is a css tooltips? How do you make a css tooltips? This script and codes were developed by Alan Shortis on 14 November 2022, Monday.

CSS Tooltips Previews
IQ Test

CSS Tooltips - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Tooltips</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
CSS tooltips:
- Uses SVG Sprites (though that's got nothing to do with the tooltips)
- Add a tooltip buy just adding the data attribute - no extra elements
- Only show the tooltip if the attribute has a value
- Delay before showing tooltip to avoid annoying savvy users
- Transition on opacity since we can't use transitions on visibility
- Some magic numbers to clean up
-->
<div class="visually-hidden"> <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-expand" viewBox="0 0 24 24"><path d="M17 1h3q1.242 0 2.121.879T23 4v3q0 .414-.293.707T22 8t-.707-.293T21 7V4q0-.414-.293-.707T20 3h-3q-.414 0-.707-.293T16 2t.293-.707T17 1zM2 16q.414 0 .707.293T3 17v3q0 .414.293.707T4 21h3q.414 0 .707.293T8 22t-.293.707T7 23H4q-1.242 0-2.121-.879T1 20v-3q0-.414.293-.707T2 16zM4 1h3q.414 0 .707.293T8 2t-.293.707T7 3H4q-.414 0-.707.293T3 4v3q0 .414-.293.707T2 8t-.707-.293T1 7V4q0-1.242.879-2.121T4 1zm18 15q.414 0 .707.293T23 17v3q0 1.242-.879 2.121T20 23h-3q-.414 0-.707-.293T16 22t.293-.707T17 21h3q.414 0 .707-.293T21 20v-3q0-.414.293-.707T22 16z"/></symbol><symbol id="icon-minus" viewBox="0 0 24 24"><path d="M4 1h16q1.242 0 2.121.879T23 4v16q0 1.242-.879 2.121T20 23H4q-1.242 0-2.121-.879T1 20V4q0-1.242.879-2.121T4 1zm16 2H4q-.414 0-.707.293T3 4v16q0 .414.293.707T4 21h16q.414 0 .707-.293T21 20V4q0-.414-.293-.707T20 3zM8 11h8q.414 0 .707.293T17 12t-.293.707T16 13H8q-.414 0-.707-.293T7 12t.293-.707T8 11z"/></symbol><symbol id="icon-plus" viewBox="0 0 24 24"><path d="M4 1h16q1.242 0 2.121.879T23 4v16q0 1.242-.879 2.121T20 23H4q-1.242 0-2.121-.879T1 20V4q0-1.242.879-2.121T4 1zm16 2H4q-.414 0-.707.293T3 4v16q0 .414.293.707T4 21h16q.414 0 .707-.293T21 20V4q0-.414-.293-.707T20 3zm-8 4q.414 0 .707.293T13 8v3h3q.414 0 .707.293T17 12t-.293.707T16 13h-3v3q0 .414-.293.707T12 17t-.707-.293T11 16v-3H8q-.414 0-.707-.293T7 12t.293-.707T8 11h3V8q0-.414.293-.707T12 7z"/></symbol><symbol id="icon-search" viewBox="0 0 24 24"><path d="M10 1q1.828 0 3.496.715t2.871 1.918 1.918 2.871T19 10q0 1.57-.512 3.008t-1.457 2.609l5.68 5.672Q23 21.578 23 22q0 .43-.285.715T22 23q-.422 0-.711-.289l-5.672-5.68q-1.172.945-2.609 1.457T10 19q-1.828 0-3.496-.715t-2.871-1.918-1.918-2.871T1 10t.715-3.496 1.918-2.871 2.871-1.918T10 1zm0 2q-1.422 0-2.719.555T5.047 5.047 3.555 7.281 3 10t.555 2.719 1.492 2.234 2.234 1.492T10 17t2.719-.555 2.234-1.492 1.492-2.234T17 10t-.555-2.719-1.492-2.234-2.234-1.492T10 3z"/></symbol></svg>
</div>
<button class="icon-button" data-tooltip> <svg class="icon" role="presentation"> <use xlink:href="#icon-search"> </svg>
</button>
<button class="icon-button" data-tooltip="Zoom In"> <svg class="icon" role="presentation"> <use xlink:href="#icon-plus"> </svg>
</button>
<button class="icon-button" data-tooltip="Zoom Out"> <svg class="icon" role="presentation"> <use xlink:href="#icon-minus"> </svg>
</button>
<button class="icon-button" data-tooltip="Fullscreen"> <svg class="icon" role="presentation"> <use xlink:href="#icon-expand"> </svg>
</button>
</body>
</html>

CSS Tooltips - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Roboto:300";
html, body { height: 100%;
}
body { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #333333; color: #fefefe; font-family: Roboto; font-weight: 300; font-size: 16px;
}
.visually-hidden { display: none;
}
.icon-button { background: transparent; border: 0; outline: 0; cursor: pointer; padding: 0; margin: 12px; margin: 6px 12px;
}
.icon { width: 1.25rem; height: 1.25rem; fill: #fefefe;
}
[data-tooltip]:not([data-tooltip=""]) { position: relative; font-size: .66rem; font-weight: 300; text-transform: uppercase;
}
[data-tooltip]:not([data-tooltip=""])::before, [data-tooltip]:not([data-tooltip=""])::after { position: absolute; visibility: hidden; transition: visibility 0s ease 200ms, opacity 200ms ease; opacity: 0;
}
[data-tooltip]:not([data-tooltip=""])::before { top: 1px; right: calc(100% + 8px); background: #999999; color: #333333; white-space: nowrap; padding: 3px 6px; border-radius: 3px; content: attr(data-tooltip);
}
[data-tooltip]:not([data-tooltip=""])::after { top: 5px; right: 100%; width: 0; height: 0; border: solid transparent 4px; border-left-color: #999999; content: '';
}
[data-tooltip]:not([data-tooltip=""]):hover::before, [data-tooltip]:not([data-tooltip=""]):hover::after { visibility: visible; opacity: 1; transition-delay: 1s;
}
CSS Tooltips - Script Codes
CSS Tooltips - Script Codes
Home Page Home
Developer Alan Shortis
Username alanshortis
Uploaded November 14, 2022
Rating 3
Size 3,836 Kb
Views 14,168
Do you need developer help for CSS Tooltips?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alan Shortis (alanshortis) Script Codes
Name
Orb 2
Overlapping Circles
Something
Scope Bar
Flexbox responsive embed
2D fluid image
Spotify Artist Radio Thumbnails
Burger menu icon
Dropbox logo with CSS Grid
Responsive Grid
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!