Slide In Right Tooltip - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slide In Right Tooltip</title> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #ffecd2; margin: 0; } .tooltip-container { position: relative; display: inline-block; } .tooltip-container .tooltip { visibility: hidden; width: 220px; background: #333; color: #fff; text-align: center; border-radius: 10px; padding: 15px; position: absolute; z-index: 1; top: 50%; right: 125%; transform: translateY(-50%) translateX(20px); opacity: 0; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; font-size: 14px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); } .tooltip-container .tooltip::after { content: ""; position: absolute; top: 50%; right: 0; margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent transparent #333; } .tooltip-container:hover .tooltip { visibility: visible; opacity: 1; transform: translateY(-50%) translateX(0); } .tooltip-content { display: flex; align-items: center; justify-content: center; } .tooltip-content .emoji { font-size: 20px; margin-right: 8px; } .tooltip-content .icon { font-size: 20px; margin-right: 8px; } .tooltip-content .text { text-align: left; } .tooltip-content .text h4 { margin: 0; font-size: 16px; color: #ffa500; } .tooltip-content .text p { margin: 5px 0 0; } .hover-me-btn{ width: 150px; height: 45px; border: none; outline: none; background: rgba(0, 0, 0, 0.8); color: #fff; text-align: center; border-radius: 10px; } </style> </head> <body> <div class="tooltip-container"> <button type="button" class="hover-me-btn">Hover me!</button> <div class="tooltip"> <div class="tooltip-content"> <span class="emoji">💡</span> <span class="icon">🚀</span> <div class="text"> <h4>Slide-in Right Tooltip</h4> <p>This tooltip slides in smoothly from the right!</p> </div> </div> </div> </div> </body> </html>