M-popover
How do I make an m-popover?
Modular popover styles loosly following the concepts of SMACSS. What is a m-popover? How do you make a m-popover? This script and codes were developed by Tom on 01 September 2022, Thursday.
M-popover Previews
M-popover - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>m-popover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="m-popover"> <h1>m-popover</h1> <p> This is an alternativeto the bootstrap popover. <em>l-popover-small</em> defines a set width and height. Similar classes can be defined with different sizings. <em>m-popover</em> and <em>m-popover-inner</em> are nessisary for the display of arrows with a border. <em>l-popover-content</em> is used to vertically align text. </p> <ol> <li><a href="#m-popover-ex1">Popover</a></li> <li><a href="#m-popover-left">Arrow Left</a></li> <li><a href="#m-popover-right">Arrow Right</a></li> <li><a href="#m-popover-top">Arrow Top</a></li> <li><a href="#m-popover-bottom">Arrow Bottom</a></li> </ol> <div id="m-popover-ex1" class="l-style-guide-item"> <div class="example-text-right"> In vel urna quis orci consectetur iaculis at in nunc. Phasellus interdum erat ut mollis rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor in elit vel placerat. Vestibulum sit amet tellus ullamcorper, tempus ex et, feugiat mauris. Cras porttitor justo nisi, eu interdum velit semper a. Quisque eu arcu ipsum. Nullam sed dapibus elit. Duis lacinia eros et blandit maximus. Nunc nulla purus, vulputate eget diam sit amet, efficitur molestie nibh. Vivamus a porta leo. Vestibulum non lorem et quam vestibulum volutpat. <div class="m-popover l-popover l-popover-small"> <div class="m-popover-inner"> <div class="m-popover-content"> Lorem ratione saepe assumenda cum fugit a. </div> </div> </div> </div> </div> <div id="m-popover-left" class="l-style-guide-item"> <div class="example-text-right"> In vel urna quis orci consectetur iaculis at in nunc. Phasellus interdum erat ut mollis rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor in elit vel placerat. Vestibulum sit amet tellus ullamcorper, tempus ex et, feugiat mauris. Cras porttitor justo nisi, eu interdum velit semper a. Quisque eu arcu ipsum. Nullam sed dapibus elit. Duis lacinia eros et blandit maximus. Nunc nulla purus, vulputate eget diam sit amet, efficitur molestie nibh. Vivamus a porta leo. Vestibulum non lorem et quam vestibulum volutpat. <div class="m-popover l-popover l-popover-arrow-left l-popover-small"> <div class="m-popover-inner"> <div class="m-popover-content"> Lorem ratione saepe assumenda cum fugit a. </div> </div> </div> </div> </div> <div id="m-popover-right" class="l-style-guide-item"> <div class="example-text-right"> In vel urna quis orci consectetur iaculis at in nunc. Phasellus interdum erat ut mollis rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor in elit vel placerat. Vestibulum sit amet tellus ullamcorper, tempus ex et, feugiat mauris. Cras porttitor justo nisi, eu interdum velit semper a. Quisque eu arcu ipsum. Nullam sed dapibus elit. Duis lacinia eros et blandit maximus. Nunc nulla purus, vulputate eget diam sit amet, efficitur molestie nibh. Vivamus a porta leo. Vestibulum non lorem et quam vestibulum volutpat. <div class="m-popover l-popover l-popover-arrow-right l-popover-small"> <div class="m-popover-inner"> <div class="m-popover-content"> Lorem ratione saepe assumenda cum fugit a. </div> </div> </div> </div> </div> <div id="m-popover-top" class="l-style-guide-item"> <div class="example-text-right"> In vel urna quis orci consectetur iaculis at in nunc. Phasellus interdum erat ut mollis rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor in elit vel placerat. Vestibulum sit amet tellus ullamcorper, tempus ex et, feugiat mauris. Cras porttitor justo nisi, eu interdum velit semper a. Quisque eu arcu ipsum. Nullam sed dapibus elit. Duis lacinia eros et blandit maximus. Nunc nulla purus, vulputate eget diam sit amet, efficitur molestie nibh. Vivamus a porta leo. Vestibulum non lorem et quam vestibulum volutpat. <div class="m-popover l-popover l-popover-arrow-top l-popover-small"> <div class="m-popover-inner"> <div class="m-popover-content"> Lorem ratione saepe assumenda cum fugit a. </div> </div> </div> </div> </div> <div id="m-popover-bottom" class="l-style-guide-item"> <div class="example-text-right"> In vel urna quis orci consectetur iaculis at in nunc. Phasellus interdum erat ut mollis rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor in elit vel placerat. Vestibulum sit amet tellus ullamcorper, tempus ex et, feugiat mauris. Cras porttitor justo nisi, eu interdum velit semper a. Quisque eu arcu ipsum. Nullam sed dapibus elit. Duis lacinia eros et blandit maximus. Nunc nulla purus, vulputate eget diam sit amet, efficitur molestie nibh. Vivamus a porta leo. Vestibulum non lorem et quam vestibulum volutpat. <div class="m-popover l-popover l-popover-arrow-bottom l-popover-small"> <div class="m-popover-inner"> <div class="m-popover-content"> Lorem ratione saepe assumenda cum fugit a. </div> </div> </div> </div> </div>
</section>
</body>
</html>
M-popover - Script Codes CSS Codes
.m-popover { background-color: #fff; border: 1px solid #000; font-family: Arial; font-size: 1em; text-align: left;
}
.m-popover.active { opacity: 1; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.m-popover.out { opacity: 0;
}
.m-popover:before { content: ''; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid transparent;
}
.m-popover-inner:before { content: ''; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-top: 10px solid transparent;
}
.l-popover { position: absolute; top: 0; left: 0; z-index: auto; display: block;
}
.l-popover:before { position: absolute; z-index: 2;
}
.l-popover .m-popover-inner { position: relative;
}
.l-popover .m-popover-inner:before { position: absolute; z-index: 2;
}
.l-popover .m-popover-content { position: absolute; top: 50%; transform: translateY(-50%);
}
.l-popover-arrow-left:before { border-right-color: #000; top: calc(50% - 10px); left: -21px;
}
.l-popover-arrow-left .m-popover-inner:before { border-right-color: #fff; top: calc(50% - 10px); left: -20px;
}
.l-popover-arrow-right:before { border-left-color: #000; top: calc(50% - 10px); right: -21px;
}
.l-popover-arrow-right .m-popover-inner:before { border-left-color: #fff; top: calc(50% - 10px); right: -20px;
}
.l-popover-arrow-top:before { border-bottom-color: #000; top: -21px; left: calc(50% - 10px);
}
.l-popover-arrow-top .m-popover-inner:before { border-bottom-color: #fff; top: -20px; left: calc(50% - 10px);
}
.l-popover-arrow-bottom:before { border-top-color: #000; bottom: -21px; left: calc(50% - 10px);
}
.l-popover-arrow-bottom .m-popover-inner:before { border-top-color: #fff; bottom: -20px; left: calc(50% - 10px);
}
.l-popover-small { width: 300px;
}
.l-popover-small .m-popover-inner { padding: 1em; height: 3em;
}
.l-popover-hidden { display: none;
}
.l-style-guide-item,
section { position: static; margin: 48px 0;
}
.l-style-guide-item { padding: 5px 0 5px 0;
}
.example-text-right { position: relative; padding-left: 320px;
}
| Developer | Tom |
| Username | tomleo |
| Uploaded | September 01, 2022 |
| Rating | 3 |
| Size | 3,555 Kb |
| Views | 24,288 |
Do you need developer help for M-popover?
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!
Tom (tomleo) Script Codes
| Name | Size |
| Sass for-loop nth-child | 1,653 Kb |
| CSS Border Property | 1,910 Kb |
| Django Responsive Menu | 5,045 Kb |
| CSS3 Transform play | 1,752 Kb |
| Form Markup | 1,636 Kb |
| SVG tooltip using D3 | 1,629 Kb |
| Using rbga | 1,680 Kb |
| D3 Responsive Graphs | 1,243 Kb |
| Semantic HTML terminal | 1,856 Kb |
| A Pen by Tom | 1,951 Kb |
Create amazing marketing copy 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!
Similar Scripts & Codes
| Name | Username | Size |
| SVG Basics | HipsterBrown | 1,852 Kb |
| Slider for stackoverflow | KKOKU | 3,222 Kb |
| CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
| Off Canvas | Mariamarica | 1,870 Kb |
| A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
| Mega menu | DimaZubkov | 5,066 Kb |
| Plotting Points with D3.js | Laurakelly | 31,996 Kb |
| Slider | Mohammed-fawzy | 2,634 Kb |
| CSS3 iPad | Vikvarg | 1,766 Kb |
| OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Do you want hide your ip address?
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!