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

[monica22]

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. 

[SetuBridge_ · 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 

[monica22]

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

[Monotechs]

Hi

Where do you paste this code exactly? 

Thanks