Different popover arrow colors

[László]

Hi,

Is there a way to have different arrow colors for popover on the same page? I have the folowing code, which opens a red and a green popover:

http://jsbin.com/xopanitu/1/edit

As you see the red one (#popover1) is ok, but the green one (#popover2) is not, because it has a red arrow.

I can set the color of the arrow with the .km-popup-arrow:after css selector, but it is applied for all the popover arrows. How can I set to only apply it for #popover1 or only to #popover2? As I see the the structure of the popover is something like this:

<div data-role="popup">
           <div class="km-popup-arrow"></div>
           <div data-role="popover" id="popover1"></div>
</div>

The problem is that I can't get .km-popover-arrow div from #popover1 div with css selectors (there is no parent selector, and sibling selectors are also not working because the arrow preceeds the popover). 

As I see the only solution is to add an ID or class to the div with data-role="popup", but how? From the docs (http://docs.telerik.com/kendo-ui/api/mobile/popover#configuration-popup) there are only height, width, direction parameters for popop. Is there a way to add class or generate id for the popup div?

Thank you!

[Kiril Nikolov]

Hello Laszlo,

Maybe the cleanest approach would be to apply a custom CSS class for each of the two popovers, that will handle the pseudo selectors and apply the styling. Please check the following example, and let me know if it helps:

http://jsbin.com/xopanitu/2/edit

Regards,
Kiril Nikolov
Telerik

 

 

[László]

Hi Kiril,

The solution is working fine, thank you!

[Kiril Nikolov]

Hello Laszlo,

I am happy to hear that you liked the solution.

In case you have any further questions please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik