DenBeke

Een eenvoudig popover maken voor een website is niet moeilijk. Hier een CSS/HTML voorbeeld om duidelijk te maken hoe eenvoudig het is.

 

HTML

De HTML code voor het voorbeeld is triviaal: we hebben een container class, deze bevat het item waarover de cursor moet gaan om de popover te doen verschijnen.

<div class="container">

    <div class="item"></div>

    <div class="popover"></div>

</div>

 

CSS

De container hoeft eigenlijk geen stijl mee te krijgen, maar het ligt het meest voor de hand om deze dezelfde grootte te geven als het element dat de popover moet doen verschijnen.

De popover krijgt zelf display: none; mee: da’s triviaal. Daarnaast moet de position ook absolute zijn. Anders zal het verschijnen van de popover de hele pagina layout in de soep doen draaien. Als deze op absolute staat, komt het gewoon boven de andere elementen.

De popover zal verschijnen wanneer men met de muis over de container hovert, door de display: block.
Het kan allemaal wat meer fancy gemaakt worden door met CSS transitions te spelen.

.container {
	width: 30px;
	height: 30px;
	margin: auto;
}

.item {
	background-color: red;
	width: 30px;
	height: 30px;
}

.popover {
	background-color: green;
	width: 300px;
	height: 200px;

	position: absolute;
	display: none;

	/* Position popover horizontally in middle        */
	/* The same can be done for the vertical position */
	margin-left: -135px /* = -300/2 +30/2 */;
}

.container:hover .popover {
	display: block;
}

Om tot slot de popover in het midden te krijgen, zal er wat gespeeld moeten worden met negative margin.

 

Voorbeeld

Ga met de muis over het rode vlak, en je zal zien dat de groene popover verschijnt…