This is a migrated thread and some comments may be shown as answers.

Different popover arrow colors

3 Answers 119 Views
PopOver (Mobile)
This is a migrated thread and some comments may be shown as answers.
László
Top achievements
Rank 1
László asked on 19 Jun 2014, 12:45 PM
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!

3 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 20 Jun 2014, 08:16 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
László
Top achievements
Rank 1
answered on 20 Jun 2014, 08:46 AM
Hi Kiril,

The solution is working fine, thank you!
0
Kiril Nikolov
Telerik team
answered on 20 Jun 2014, 10:51 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
PopOver (Mobile)
Asked by
László
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
László
Top achievements
Rank 1
Share this question
or