How to create help popups on hover

[scrambler]

In the support page of the demo site ( http://demo.weavertheme.com/support/ ), there are little help bubles that display some help when you hover over them.

Someone recently asked how that was done, so here is a small tutorial of how it was achieved.

The first part is to insert HTML in a specific content area for both the bubble/icon and the content that needs to show up on hover.

That html includes two divs. Both divs will be positioned absolute using CSS, this means their position will be relative to the closest parent that has a style “position:relative”.
So you will need to inspect the html hierarchy above and eventually add a position:relative styling rule for the parent that should be used as the positioning origin/reference.

1- The first Div has a class itemx-target, and is used to show the bubble/icon.

The example below uses a genericon, but you could replace the span by a simple image icon of your choice.
The div includes the positionning of the buble/icon. Depending on how the buble position should behave when the browser changes size, you may need to use pixels or percentages. You can also use left or right and top or bottom depending on what matters most.

2- The second Div has a class itemx-help, and contains the Help popup.

It also contains positionning that should be consistent with the positionning of the buble/icon in regards to using pixels or percentages.
Styling will hide that div all the time, and unhide it on hover

Below is an example for two items

<div id=”item1-target” class=”my-bubble” style=”left: 10%; top: 50px;” >
<span class=”genericon genericon-help” style=”font-size:24px;color:red;”></span>
</div>
<div id=”item1-help” class=”all-help” style=”left: 5%; top: 80px;”>
Put your content for the popup here
</div>

<div id=”item2-target” class=”my-bubble” style=”left: 35%; top: 180px;” >
<span class=”genericon genericon-help” style=”font-size:24px;color:red;”></span>
</div>
<div id=”item2-help” class=”all-help” style=”left: 25%; top: 200px;”>
Put your content for the popup here
</div>

Then you would use the CSS below in the theme Custom CSS Rule box (On Xtreme that is Main Options > Fonts & Custom > Custom CSS Rule box). The general rules for the popup will depend on how you want them to look, but must include the pink highlighted properties

/*General rules for buble/icon and help popup*/
.my-bubble {position:absolute;z-index:100;display:block;
background-color:white;border-radius:15px;height:22px;padding-top:1px;}
.all-help {display:none;position:absolute;z-index:200;
font-family:Arial,”Helvetica Neue”,Helvetica,sans-serif;
font-style:normal;
line-height:1.5;
text-align:left;
background-color:#E9E9E9;
border-radius:5px;
max-width:450px;
padding:10px;
box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
border:2px solid grey;
box-shadow:2px 2px 10px rgba(0,0,0,0.8);-webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.8);-moz-box-shadow:2px 2px 10px rgba(0,0,0,0.8);}

/*Hover rules for each item*/
#item1-target:hover ~ #item1-help {display:block;}
#item2-target:hover ~ #item2-help {display:block;}

Notes:
A- If the positioning cannot be made to work on all devices, you may need to remove the positioning from the inline style of the html, and instead set it in the custom CSS rule with different values for different devices like below

#item1-target {left:xxx;top:yyy;}
.is-smalltablet #item1-target {left:xxx;top:yyy;}
.is-phone #item1-target {left:xxx;top:yyy;}

B- If you do not want the popup to show on mobile, just add a device class on the hover rule like

.is-desktop #item1-target:hover ~ #item1-help {display:block;}

Let me know if any questions

[Author]

Posts