YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar ramil.valitov asked

[Tutorial] How to use custom and unique icons in Popover

This tutorial shows 2 approaches to the following common questions:
1. How to use a custom icon in Popover widget.
2. How to use a custom unique icon for every element.

There are 2 approaches: the first one is an educational tutorial - the CSS approach. The second - is the advanced version of the widget that has such features insed can be used as a final easy solution.

The CSS approach

How to use a custom icon in Popover widget

1) First you need to select 'Custom' as a 'Toggle Icon' option in the widget settings at 'Popover' tab:

2) Then add a custom CSS class to the widget at ''General" tab, so that we can identify our widget somehow. You can use your own arbitrary valid CSS class name, in our example let's call it "ram-popover":

3) Then we need to add a custom CSS code to the theme. You can do that by editing the custom.css file in your theme or create your own style (which is the preferred method) and append your CSS there, read more about this in Yootheme documentation. The CSS code we need to add is:

.ram-popover a.wk-popover-toggle{  
width: 64px;  
height: 64px;  
background-size: contain;  
background-repeat: no-repeat;  
background: url('/images/custom-toggle.png');  

Make sure, that you set the correct size (width and height) above that corresponds to your image. The /images/custom-toggle.png is a path to your custom toggle image file.

How to use a custom unique icon for every element

First of all this approach requires that you know exactly the order in which your elements are displayed. It's easy to know the order if you use 'Custom' as a content source, in this case elements are displayed in the same order as they show in the widget's control panel. The first 2 steps are the same as in the previous paragraph.

4) You should add the following CSS code for each element that you want to use a unique image:

.ram-popover div.uk-position-absolute:nth-of-type(ID) a.wk-popover-toggle{  
    background-image: url(/images/custom-ID.png);  

Here the nth-of-type(ID) refers to the element and ID is the number of the element, it can be 1,2,3, etc. For the background-image you should specify you own valid image path. For example, if we want to put image /images/usa.png as a custom toggle for element number 3, we should put the following code:

.ram-popover div.uk-position-absolute:nth-of-type(3) a.wk-popover-toggle{  
    background-image: url(/images/usa.png);  

That's all :)

The advanced Popover widget

I created advanced version of the popover widget that allows to easily customize all the features we discussed above through the widget's control panel.

Main settings screen


Custom unique image for elements


Example of how it looks on front-end


Please, have a try. It's available for free here https://github.com/rvalitov/widgetkit-popover-ex The manual is here. Hope, this helps you.

Your feedback is welcome and can be posted here or at the issues section

If you like the tutorial, please vote it up (use the "plus" buttons).

  • Widgetkit
  • Tutorial


4 Answers


Avatar admin.ffh answered

Thank you very much for yours tuto @ramil.valitov

Do you know how possible to let always visible content of the popover ?

Many thanks in advance



Avatar brandon.slack answered

It would be nice if they incorporated custom popover icons into the Pro Popover builder. From what I can see there's no option to select a different icon let alone customize each one.

Know someone who can answer? Share a link to this question via email or twitter.