Solved

How to add a hover message to product pages in Dawn theme?

monica22
Excursionist
13 1 3

Hi,

I would like to add this question mark to my product pages, when the user hovers over the question mark I would like to add a message. 

Accepted Solution (1)

DipenPanchal
Shopify Partner
252 59 80

This is an accepted solution.

Hello @monica22 

Greetings!!

 

Add this code where you put the question mark on product pages

 

<span class="ques_tooltip hide_msg_toggle">
<span style="left: 0;" class="ques_tooltiptext">
Enable the button to show delivery messages applicable to specific rules only and hide the general/default message for all other products.
</span>
</span>
<style type="text/css">

.ques_tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.hide_msg_toggle:after {
content: '?';
display: block;
line-height: 20px;
width: 20px;
font-size: 12px;
text-align: center;
font-weight: 700;
color: #fff;
vertical-align: middle;
top: 0;
position: relative;
background: #3c8060;
border-radius: 20px;
}
.ques_tooltip .ques_tooltiptext {
visibility: hidden;
width: 320px;
font-weight: 400;
background-color: #161515e0;
color: #fff;
line-height: 1.4;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 165%;
left: 40%;
margin-left: -60px;
border: 1px solid #ddd;
box-shadow: 0 0 1px #43467f;
}
.ques_tooltip:hover .ques_tooltiptext {
visibility: visible;
z-index: 9999999999999;
}
.ques_tooltip .ques_tooltiptext::after {
content: "";
position: absolute;
left: 60px;
bottom: -18px;
margin-left: -9px;
margin: 0 0 0;
border-width: 9px;
border-style: solid;
border-color: #161515e0 transparent transparent transparent;
}
</style>

Output 

DipenPanchal_0-1650523564479.png

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge

View solution in original post

Replies 3 (3)

DipenPanchal
Shopify Partner
252 59 80

This is an accepted solution.

Hello @monica22 

Greetings!!

 

Add this code where you put the question mark on product pages

 

<span class="ques_tooltip hide_msg_toggle">
<span style="left: 0;" class="ques_tooltiptext">
Enable the button to show delivery messages applicable to specific rules only and hide the general/default message for all other products.
</span>
</span>
<style type="text/css">

.ques_tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.hide_msg_toggle:after {
content: '?';
display: block;
line-height: 20px;
width: 20px;
font-size: 12px;
text-align: center;
font-weight: 700;
color: #fff;
vertical-align: middle;
top: 0;
position: relative;
background: #3c8060;
border-radius: 20px;
}
.ques_tooltip .ques_tooltiptext {
visibility: hidden;
width: 320px;
font-weight: 400;
background-color: #161515e0;
color: #fff;
line-height: 1.4;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 165%;
left: 40%;
margin-left: -60px;
border: 1px solid #ddd;
box-shadow: 0 0 1px #43467f;
}
.ques_tooltip:hover .ques_tooltiptext {
visibility: visible;
z-index: 9999999999999;
}
.ques_tooltip .ques_tooltiptext::after {
content: "";
position: absolute;
left: 60px;
bottom: -18px;
margin-left: -9px;
margin: 0 0 0;
border-width: 9px;
border-style: solid;
border-color: #161515e0 transparent transparent transparent;
}
</style>

Output 

DipenPanchal_0-1650523564479.png

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
monica22
Excursionist
13 1 3

Thank you so much!!! I really appreciate your help, it worked like a charm. 

Monotechs
Visitor
1 0 0

Hi

Where do you paste this code exactly? 

Thanks