Een eenvoudig popover maken voor een website is niet moeilijk. Hier een CSS\/HTML voorbeeld om duidelijk te maken hoe eenvoudig het is.<\/p>\n
<\/p>\n
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.<\/p>\n
<div class=\"container\">\r\n\r\n <div class=\"item\"><\/div>\r\n\r\n <div class=\"popover\"><\/div>\r\n\r\n<\/div><\/code><\/pre>\n <\/p>\n
CSS<\/h2>\n
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.<\/p>\n
De popover krijgt zelf display: none;<\/code> mee: da’s triviaal. Daarnaast moet de position<\/code> ook absolute<\/code> zijn. Anders zal het verschijnen van de popover de hele pagina layout in de soep doen draaien. Als deze op absolute<\/code> staat, komt het gewoon boven de andere elementen.<\/p>\nDe popover zal verschijnen wanneer men met de muis over de container hovert, door de display: block<\/code>.
\nHet kan allemaal wat meer fancy gemaakt worden door met CSS transitions te spelen.<\/p>\n.container {\r\n\twidth: 30px;\r\n\theight: 30px;\r\n\tmargin: auto;\r\n}\r\n\r\n.item {\r\n\tbackground-color: red;\r\n\twidth: 30px;\r\n\theight: 30px;\r\n}\r\n\r\n.popover {\r\n\tbackground-color: green;\r\n\twidth: 300px;\r\n\theight: 200px;\r\n\r\n\tposition: absolute;\r\n\tdisplay: none;\r\n\r\n\t\/* Position popover horizontally in middle *\/\r\n\t\/* The same can be done for the vertical position *\/\r\n\tmargin-left: -135px \/* = -300\/2 +30\/2 *\/;\r\n}\r\n\r\n.container:hover .popover {\r\n\tdisplay: block;\r\n}<\/code><\/pre>\nOm tot slot de popover in het midden te krijgen, zal er wat gespeeld moeten worden met negative margin<\/code>.<\/p>\n <\/p>\n
Voorbeeld<\/h2>\n
Ga met de muis over het rode vlak, en je zal zien dat de groene popover verschijnt…<\/em><\/p>\n