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.
Topic summary
Goal: add a question-mark icon on product pages that shows a hover tooltip (Shopify Dawn theme).
Solution provided:
- Insert an HTML span with classes “ques_tooltip hide_msg_toggle” containing a nested span “ques_tooltiptext” for the message.
- Add accompanying CSS that:
- Uses :after to render a circular “?” icon.
- Styles a hidden tooltip box that becomes visible on hover.
- Positions the tooltip above the icon and adds a small pointer via ::after.
- Example tooltip text: “Enable the button to show delivery messages applicable to specific rules only and hide the general/default message for all other products.”
- Visual confirmation: an image shows the expected tooltip appearance.
Status and outcomes:
- The original poster confirmed the code works.
- A follow-up question asks where exactly to paste the code. The guidance given was to add it “where you put the question mark on product pages,” but no precise file/section was specified. This clarification remains open.
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
Thank you so much!!! I really appreciate your help, it worked like a charm.
1 Like
Hi
Where do you paste this code exactly?
Thanks