Two new components were released with OxyExtras v1.3.2, Hotspots & Popovers. They are designed to partner together mainly for creating image hotspots where you may be wishing to highlight certain features or focus the user’s attention on something in particular. See examples.
When using the popovers inside the hotspots container, they are being used as markers to place your hotspots. But.. as we’re already using the same functionality, we couldn’t resist building in the settings to provide a way to use these same popovers to add popovers to any other elements on the page.
Adding Popovers to Other Elements
With popover being its own component, the idea is that we can build it, style it, configure the animation all within the component settings and then use it elsewhere on the page.
To attach the popover to a particular element, we can provide a selector (the class or ID) for the element(s) that we wish to apply it to. Here we’re just using the class ‘button’.
By being able to choose an element or elements by selector, it means we can also add popovers to anything we like, even selectors that are targeting things inside of other components.
Adding content inside the popover
The dropdown ‘Popover content’ in the settings has two options when it comes to adding content to the popover. You can either build it using Oxygen components inside the popover or add the content via HTML attribute to the element itself.
If you’re only intending on adding text inside the popovers, one benefit of doing it via attributes is that you could use one popover component across multiple elements on the page. The content would then be added dynamically using the attribute found on each element.
For example, if you have a button which you’re adding a popover to when it’s hovered, you’d set up the popover as seen above, but instead of dragging elements inside for adding the content, you’d go to the button component which is being targeted and add your attribute name ‘data-tippy-content’ with your content as the attribute value.
You could then do the same for multiple buttons on the page with this same ‘button’ class, but just a different attribute value for each one.
As attributes allow dynamic data, it opens up lots of possibilities of what data could be showing inside of the popover. Pricing, availability for a particular product, user info.. etc. It also means we can use the popovers inside of repeaters, as each element will have different dynamic data coming from that particular post.
