Tooltips with BEM
How do I make an tooltips with bem?
What is a tooltips with bem? How do you make a tooltips with bem? This script and codes were developed by Alexandr on 28 August 2022, Sunday.
Tooltips with BEM - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>tooltips with BEM </title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/> </head> <body> <div class="container"> <div class="tooltip"> <div class="tooltip__user-info"> <div class="tooltip__user-photo"></div> <div class="tooltip__user-name">Username</div> <div class="tooltip__user-edge">25 years</div> <div class="tooltip__user-location">London, UK</div> </div> <div class="tooltip__buttons-block"><a class="tooltip__button tooltip__button_message" href="#">message</a><a class="tooltip__button tooltip__button_like-photo" href="#">like photo</a></div> </div> <div class="tooltip tooltip_right tooltip_inverse"> <div class="tooltip__user-info"> <div class="tooltip__user-photo"></div> <div class="tooltip__user-name">Username</div> <div class="tooltip__user-edge">25 years</div> <div class="tooltip__user-location">London, UK</div> </div> <div class="tooltip__buttons-block"><a class="tooltip__button tooltip__button_message" href="#">message</a><a class="tooltip__button tooltip__button_like-photo" href="#">like photo</a></div> </div> </div> </body>
</html>
</body>
</html>
Tooltips with BEM - Script Codes CSS Codes
* { padding: 0; margin: 0; outline: 0;
}
img { border: 0;
}
body { background-color: rgba(0, 153, 0, 0.125);
}
.container { position: relative; margin: 50px auto; width: 710px;
}
.tooltip { box-sizing: border-box; box-shadow: 0 1px 5px 2px #c5c5c5; background-color: #fff; border: 1px solid transparent; border-radius: 5px; margin: 50px 30px; width: 292px; position: relative; display: inline-block;
}
.tooltip:after { background: #fff; box-shadow: -2px -2px 2px 0px #c5c5c5; content: ""; position: absolute; transform: rotate(45deg); top: -10px; left: 25px; width: 20px; height: 20px;
}
.tooltip__user-info { box-sizing: border-box; height: 110px; padding: 23px;
}
.tooltip__user-photo { background: #e0e0e0; float: left; margin-right: 23px; width: 64px; height: 64px;
}
.tooltip__user-name { font: 600 18px Roboto, sans-serif; color: #333; margin-top: -3px;
}
.tooltip__user-edge, .tooltip__user-location { font: 600 14px Roboto, sans-serif; color: #888; padding-top: 5px;
}
.tooltip__user-location { padding-top: 7px;
}
.tooltip__buttons-block { border-radius: 5px; background: #f9f9f9; box-sizing: border-box; padding: 17px 0 0 23px; width: 100%; height: 72px;
}
.tooltip__button { position: relative; border-radius: 5px; box-shadow: 0 1px 2px 0px #c5c5c5; display: inline-block; font: 14px Roboto, sans-serif; margin-right: 16px; padding: 11px 22px 12px 22px; text-decoration: none; text-transform: uppercase;
}
.tooltip__button:hover { top: -1px; left: -1px;
}
.tooltip__button:active { top: 1px; left: 1px;
}
.tooltip__button_message { background: #00bcd4; color: #fff;
}
.tooltip__button_like-photo { background: #e0e0e0; color: #333;
}
.tooltip_right:after { content: ""; top: 25px; left: calc(100% - 10px); transform: rotate(135deg);
}
.tooltip_inverse { background: #444;
}
.tooltip_inverse:after { background: #444;
}
.tooltip_inverse .tooltip__user-photo { background: #545454;
}
.tooltip_inverse .tooltip__user-name { color: #fff;
}
.tooltip_inverse .tooltip__user-edge, .tooltip_inverse .tooltip__user-location { color: #aaa;
}
.tooltip_inverse .tooltip__buttons-block { background: #333;
}
.tooltip_inverse .tooltip__button { box-shadow: 0 1px 2px 0px #2e2e2e;
}
.tooltip_inverse .tooltip__button_like-photo { background: #444; color: #fff;
}
Developer | Alexandr |
Username | Aortan |
Uploaded | August 28, 2022 |
Rating | 3 |
Size | 3,455 Kb |
Views | 44,528 |
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!
Name | Size |
Overflow-wrap and white-space | 2,790 Kb |
Mastermind | 7,180 Kb |
Game of Life | 5,070 Kb |
A Pen by Alexander | 10,161 Kb |
Shape-outside | 3,286 Kb |
Flexblock | 2,153 Kb |
A Pen by Alexandr | 12,106 Kb |
Color Game of Life | 5,809 Kb |
Colorful flexblock | 2,699 Kb |
Webkit-scrollbar | 3,612 Kb |
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!
Name | Username | Size |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Pink expansion tunnel | Vez | 1,738 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!