Info Button / Tooltip

Developer
Mark Thomes
Size
3,474 Kb
Views
54,648
  1. Info Button / Tooltip Previews
  2. Info Button / Tooltip HTML Codes
  3. Info Button / Tooltip CSS Codes
  4. Info Button / Tooltip JS Codes

How do I make an info button / tooltip?

CSS only info tooltip using focus state to toggle visibility of the button.. What is a info button / tooltip? How do you make a info button / tooltip? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Info Button / Tooltip Previews
IQ Test

Info Button / Tooltip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Info Button / Tooltip</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <div class="absCenter"> <button class="infoButton"> <div class="infoButton-btn"> <span class="infoButton-btn-text">i</span> </div> <div class="infoButton-container"> <div class="infoButton-container-message">This is a message about the thing that you need to know.</div> </div> </button>
</div> <script src="js/index.js"></script>
</body>
</html>

Info Button / Tooltip - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
body { font-family: 'Montserrat', sans-serif; font-weight: 400; background-color: #F6F6F6; height: 100vh;
}
*:focus { outline: none;
}
.absCenter { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.infoButton { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background-color: transparent; padding: 0; margin: 0; font-size: 14px; position: relative;
}
.infoButton-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 1px solid red; border-radius: 10px; width: 20px; height: 20px; color: red; background-color: white; font-weight: 700; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: border-radius 200ms ease-in-out; transition: border-radius 200ms ease-in-out;
}
.infoButton-btn-text { display: block; text-align: center; width: 20px; height: 20px; line-height: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.infoButton-container { position: absolute; bottom: calc(-100% + 60px); right: 0; margin-right: -90px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0ms linear 200ms; transition: -webkit-transform 0ms linear 200ms; transition: transform 0ms linear 200ms; transition: transform 0ms linear 200ms, -webkit-transform 0ms linear 200ms;
}
.infoButton-container-message { box-sizing: border-box; width: 200px; padding: 16px 20px; font-size: 14px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.26); border-radius: 4px; line-height: 1.3; text-align: left; -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out; transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out; background-color: white;
}
.infoButton:focus .infoButton-btn,
.infoButton_isActive .infoButton-btn { border-top-right-radius: 0; -webkit-transition: border-radius 200ms ease-in-out; transition: border-radius 200ms ease-in-out; background-color: red; color: white;
}
.infoButton:focus .infoButton-container,
.infoButton_isActive .infoButton-container { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0ms linear; transition: -webkit-transform 0ms linear; transition: transform 0ms linear; transition: transform 0ms linear, -webkit-transform 0ms linear;
}
.infoButton:focus
.infoButton-container-message,
.infoButton_isActive
.infoButton-container-message { -webkit-transform: translate(0); transform: translate(0); opacity: 1;
}

Info Button / Tooltip - Script Codes JS Codes

// JS for thumbnail presentation only
let mouseMoved = false;
const button = document.querySelector('.infoButton');
const mouseMoveHandler = event => { clearInterval(loop); document.onmousemove = null; button.classList.remove('infoButton_isActive');
};
const toggleHandler = event => { const classes = button.classList; if (classes.contains('infoButton_isActive')) { classes.remove('infoButton_isActive'); } else { classes.add('infoButton_isActive'); }
}
document.onmousemove = mouseMoveHandler;
const loop = setInterval(toggleHandler, 1000);
Info Button / Tooltip - Script Codes
Info Button / Tooltip - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 4
Size 3,474 Kb
Views 54,648
Do you need developer help for Info Button / Tooltip?

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!

Mark Thomes (WithAnEs) Script Codes
Name
404 Animated Character
Social Icons
Animation Delay Debug
Pharmacy Loader
Basic Menu CSS
CSS Books
CSS Colorado Flag
Swaying Open Sign
SVG Search...
Running Character
Create amazing video scripts 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!