Simple tooltips

Developer
Benjamin Réthoré
Size
2,810 Kb
Views
8,096
  1. Simple tooltips Previews
  2. Simple tooltips HTML Codes
  3. Simple tooltips CSS Codes

How do I make an simple tooltips?

What is a simple tooltips? How do you make a simple tooltips? This script and codes were developed by Benjamin Réthoré on 05 January 2023, Thursday.

Simple tooltips Previews
IQ Test

Simple tooltips - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple tooltips</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main style="margin: 100px auto; max-width:60em; line-height:1.5;">Lorem <u data-tooltip="Ceci est du latin" >ipsum dolor</u> sit amet, consectetur adipisicing elit. Soluta, corrupti! Ducimus sequi cupiditate, autem <u data-tooltip="Encore du latin" data-tooltip-position="bottom">facere</u> ut rerum vel eius eaque corrupti saepe suscipit placeat dolorem consectetur repudiandae totam, perferendis voluptas.</main>
</body>
</html>

Simple tooltips - Script Codes CSS Codes

[data-tooltip] { position: relative; overflow: hidden;
}
[data-tooltip]:before { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 50%; display: block; height: 35px; padding: 0 15px; background-color: rgba(0, 0, 0, 0.8); white-space: nowrap; border-radius: 3px; font-size: 14px; font-weight: 400; line-height: 35px; color: white; transition: all 150ms cubic-bezier(0.645, 0.045, 0.355, 1); transform-origin: center center; transform: translateX(-50%); margin-bottom: 0; opacity: 0;
}
[data-tooltip]:after { content: ''; position: absolute; bottom: 120%; left: 50%; width: 0; height: 0; margin-left: -4px; border-style: solid; border-width: 5px 4px 0 4px; border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; transform-origin: center center; transition: all 150ms cubic-bezier(0.645, 0.045, 0.355, 1); transform: translateX(-50%); margin-bottom: -5px; opacity: 0;
}
[data-tooltip]:hover { cursor: help; overflow: visible;
}
[data-tooltip]:hover:before { margin-bottom: 5px; opacity: 1;
}
[data-tooltip]:hover:after { margin-bottom: 0; opacity: 1;
}
[data-tooltip][data-tooltip-position="bottom"]:before { bottom: inherit; top: 120%; margin-bottom: inherit; margin-top: 0;
}
[data-tooltip][data-tooltip-position="bottom"]:after { bottom: inherit; top: 120%; border-width: 0 4px 5px 4px; border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; margin-bottom: inherit; margin-top: -5px;
}
[data-tooltip][data-tooltip-position="bottom"]:hover:before { margin-bottom: inherit; margin-top: 5px;
}
[data-tooltip][data-tooltip-position="bottom"]:hover:after { margin-bottom: inherit; margin-top: 0;
}
Simple tooltips - Script Codes
Simple tooltips - Script Codes
Home Page Home
Developer Benjamin Réthoré
Username bnthor
Uploaded January 05, 2023
Rating 3
Size 2,810 Kb
Views 8,096
Do you need developer help for Simple 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!

Benjamin Réthoré (bnthor) Script Codes
Name
Cookie policy popunder
Responsive height typographic menu
CSS Grid gallery
Sample scss map
Fun form with currentColor
Create amazing Facebook ads 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!