Button Tooltips

Developer
Pete Nawara
Size
5,215 Kb
Views
30,360
  1. Button Tooltips Previews
  2. Button Tooltips HTML Codes
  3. Button Tooltips CSS Codes

How do I make an button tooltips?

So you wanna know what this button does before you click on it? Okay! (I tried using pseudo elements for the little nub arrow thingy, but they didn't seem to play well with transitions. Anyone wanna have a crack at it?). What is a button tooltips? How do you make a button tooltips? This script and codes were developed by Pete Nawara on 10 September 2022, Saturday.

Button Tooltips Previews
IQ Test

Button Tooltips - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Tooltips</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:400);
@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:700);
body { width: 100%; background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.wrap { width: 500px; margin: 100px auto; /* button stuffs */
}
.wrap button { font-family: 'Archivo Narrow', sans-serif; font-weight: bold; font-size: 36px; display: block; padding: 10px 30px; margin: 0 auto; min-width: 200px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; box-shadow: 1px 1px 1px #fff; -moz-box-shadow: 1px 1px 1px #fff; -webkit-box-shadow: 1px 1px 1px #fff; text-shadow: 1px 1px 0px #fff; font-weight: 400; color: #333; border: 1px solid #aaa; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #feffe8; /* Old browsers */ background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #feffe8 0%, #d6dbbf 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(to bottom, #feffe8 0%, #d6dbbf 100%); /* W3C */ -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; /* span stuffs (tooltip) */
}
.wrap button:hover { background: -moz-linear-gradient(top, #fffce7 0%, #fdfd9f 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #fffce7 0%, #fdfd9f 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(to bottom, #fffce7 0%, #fdfd9f 100%); /* W3C */
}
.wrap button:active { background: -moz-linear-gradient(top, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(to bottom, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%); /* W3C */
}
.wrap button span { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; padding: 10px; width: 190px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 0 0 #fff; font-weight: normal; color: rgba(255, 255, 255, 0); opacity: 0; font-size: 16px; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s; z-index: 1;
}
.wrap button span .nub { display: block; width: 10px; height: 10px; padding: 5px; border-style: solid; border-color: transparent; background: rgba(255, 255, 255, 0.8); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 42%; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 0; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
}
.wrap button span.top { top: 0px; left: 4px;
}
.wrap button span.top .nub { left: 20%; bottom: -8px;
}
.wrap button span.bottom { bottom: 0px; left: 4px;
}
.wrap button span.bottom .nub { left: 20%; top: -8px;
}
.wrap button span.left { top: 0px; left: 4px;
}
.wrap button span.left .nub { left: 180px; top: 20px;
}
.wrap button span.right { top: 0px; right: 4px;
}
.wrap button span.right .nub { left: -8px; top: 20px; margin: 0 0 0 0; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in;
}
.wrap button:hover span { background: #0099ff; height: auto; color: #fff; font-size: 16px; opacity: 100; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s;
}
.wrap button:hover span .nub { -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s;
}
.wrap button:hover span.bottom { bottom: -60px;
}
.wrap button:hover span.left { left: -193px;
}
.wrap button:hover span.right { right: -193px;
}
.wrap button:hover span.top { top: -60px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <button class="tip"> What's this do? <!-- change the class on the span below between 'top', 'right', 'bottom', 'left' --> <span class="left">It doesn't do anything, don't bother clicking on it.<span class="nub"></span> </span> </button>
</div>
</body>
</html>

Button Tooltips - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:400);
@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:700);
body { width: 100%; background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.wrap { width: 500px; margin: 100px auto; /* button stuffs */
}
.wrap button { font-family: 'Archivo Narrow', sans-serif; font-weight: bold; font-size: 36px; display: block; padding: 10px 30px; margin: 0 auto; min-width: 200px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; box-shadow: 1px 1px 1px #fff; -moz-box-shadow: 1px 1px 1px #fff; -webkit-box-shadow: 1px 1px 1px #fff; text-shadow: 1px 1px 0px #fff; font-weight: 400; color: #333; border: 1px solid #aaa; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #feffe8; /* Old browsers */ background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #feffe8 0%, #d6dbbf 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(to bottom, #feffe8 0%, #d6dbbf 100%); /* W3C */ -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; /* span stuffs (tooltip) */
}
.wrap button:hover { background: -moz-linear-gradient(top, #fffce7 0%, #fdfd9f 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #fffce7 0%, #fdfd9f 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(to bottom, #fffce7 0%, #fdfd9f 100%); /* W3C */
}
.wrap button:active { background: -moz-linear-gradient(top, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%); /* Chrome10+,Safari5.1+ */ background: linear-gradient(to bottom, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%); /* W3C */
}
.wrap button span { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; padding: 10px; width: 190px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 0 0 #fff; font-weight: normal; color: rgba(255, 255, 255, 0); opacity: 0; font-size: 16px; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s; z-index: 1;
}
.wrap button span .nub { display: block; width: 10px; height: 10px; padding: 5px; border-style: solid; border-color: transparent; background: rgba(255, 255, 255, 0.8); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 42%; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 0; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
}
.wrap button span.top { top: 0px; left: 4px;
}
.wrap button span.top .nub { left: 20%; bottom: -8px;
}
.wrap button span.bottom { bottom: 0px; left: 4px;
}
.wrap button span.bottom .nub { left: 20%; top: -8px;
}
.wrap button span.left { top: 0px; left: 4px;
}
.wrap button span.left .nub { left: 180px; top: 20px;
}
.wrap button span.right { top: 0px; right: 4px;
}
.wrap button span.right .nub { left: -8px; top: 20px; margin: 0 0 0 0; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in;
}
.wrap button:hover span { background: #0099ff; height: auto; color: #fff; font-size: 16px; opacity: 100; -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s;
}
.wrap button:hover span .nub { -moz-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -transition-delay: 0.2s;
}
.wrap button:hover span.bottom { bottom: -60px;
}
.wrap button:hover span.left { left: -193px;
}
.wrap button:hover span.right { right: -193px;
}
.wrap button:hover span.top { top: -60px;
}
Button Tooltips - Script Codes
Button Tooltips - Script Codes
Home Page Home
Developer Pete Nawara
Username petebot
Uploaded September 10, 2022
Rating 4.5
Size 5,215 Kb
Views 30,360
Do you need developer help for Button 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!

Pete Nawara (petebot) Script Codes
Name
Woman in Vintage Sunglasses
KITT
CSS Modal
ScrollMagic playpen
The Team
Text Shadow
History Viewer
Audio Compare
Dynamic Logo Creation
Ridonk Expando
Create amazing blog posts 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!