Popover

Developer
Jota Teles
Size
2,248 Kb
Views
32,384
  1. Popover Previews
  2. Popover HTML Codes
  3. Popover CSS Codes
  4. Popover JS Codes

How do I make an popover?

What is a popover? How do you make a popover? This script and codes were developed by Jota Teles on 03 September 2022, Saturday.

Popover Previews
IQ Test

Popover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Popover</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="pen"> <popovers></popovers>
<div class="popover"> <div class="popover-conteudo">lindo texto sobre gatos</div>
</div>
<h1 class="texto-qualquer"> Nós gatos já nascemos pobres, porem já nascemos livres!</h1>
<button class="gatilho-da-popover">Miau</button>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Popover - Script Codes CSS Codes

html { padding: 30px 30px; min-height: 1200px;
}
.texto-qualquer { min-height: 150px;
}
.gatilho-da-popover { margin-left: 300px;
}
.popover { background-color: #666; position: absolute;
}

Popover - Script Codes JS Codes

angular.module("pen", ["popover"]);
angular.module("popover", []);
angular.module("popover").directive("popovers", PopoversDirective);
angular.module("popover").factory("PopoversModel", PopoversModel);
function PopoversModel(){ var model = { }; return model;
}
function PopoversDirective(){ var directive = { restrict: "AE", scope: {}, template: "", controller: function(){ var vc = this; }, controllerAs: "vc", bindToController: true, }; return directive;
}
var popoverElement = document.querySelector(".popover");
var gatilhoElement = document.querySelector(".gatilho-da-popover");
var mapaPosicoes = new function(){ this.gatilhoY = gatilhoElement.offsetTop; this.gatilhoX = gatilhoElement.offsetLeft; this.gatilhoLargura = gatilhoElement.clientWidth; this.gatilhoAltura = gatilhoElement.clientHeight; this.popoverLargura = popoverElement.clientWidth; this.popoverAltura = popoverElement.clientHeight; this.espacamento = 10; this.gatilhoCentroX = this.gatilhoX + (this.gatilhoLargura / 2); this.popoverX = this.gatilhoCentroX - (this.popoverLargura / 2); this.popoverY = this.gatilhoY - (this.popoverAltura + this.espacamento);
};
popoverElement.style.left = mapaPosicoes.popoverX + "px";
popoverElement.style.top = mapaPosicoes.popoverY + "px";
Popover - Script Codes
Popover - Script Codes
Home Page Home
Developer Jota Teles
Username teles
Uploaded September 03, 2022
Rating 3
Size 2,248 Kb
Views 32,384
Do you need developer help for 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!

Jota Teles (teles) Script Codes
Name
Nes palette components
Angular link builder
Link Builder Examples
ArrayMixer
ArrayMixer Playground
Infinite chocolate bar
Parallel park - pure css
Markpad
VD Modal Sample
A Pen by Jota Teles
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!