Menu
I want to create popover menu when certain menu item is hover-ed, my menu is like this :
item1 | item2 | item3
When item2 is hovered I want to display popover below the item2 with arrow pointing upwards. I'm sure this is very easy to do using javascript although I haven't done it yet. But requirement here is to use CSS only.
I found this example :
http://demo.webinterfacelab.com/13-profile-popover/
Only difference is that I need for popover to show below the menu not above and arrow pointing upwards not downwards. Like in the image below :
Does anyone have example of how to do this? Or can help me to do this?
314
To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
To create a new popover with JavaScript, you can use the popover() function. To determine which days already have a meeting scheduled, we can add a custom data-booked property. The selector $('[data-booked="true"]') is an attribute selector and will only display a popover for that particular button.
Man, you must learn how to use inspector :) Trick is in :after and :before pseudo classes.
So, here is working DEMO of that tutorial, I've changed some CSS, check it out.
NOTE: This is CSS3 valid demo. Those pseudo classes will not work in older browsers, and you will not see arrow. Same is with transitions, and other CSS3 fancy things. If you don't want JS, you should be aware of that.
108
http://jsfiddle.net/9yeAJ/
The fiddle above illustrates just one way to do this. Hope it sets you on the right track.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
