Tooltip text responsive (Boost theme)

Solved
Tourist
14 0 0

Hi Friends,

 

I have problem with the Tooltip text popup in mobile view as attached image below. Any one please help me sort it this responsive issue in mobile veiw.  i pasted the css code for responsive below and pardon if any mistakes in css because i am not familiar with this. 

 

Our theme link: https://rymi9iqipnvr1u5z-22495265.shopifypreview.com/ 


@media screen and (max-width: 500px) {
.column01, {
display: block;
width: 50%;
height: auto;
overflow: hidden;
}
.tooltip{
position: relative;
display: inline-block;
}
}

 

 

 

tooltip-responsive.jpg

0 Likes
Astronaut
1011 131 240

Can you post your actual link? That preview doesn't work, and even if it did previews are only good for an hour. You can send me a personal message with your store link and password to get in if you don't want to post any details here.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes

Whats the exact issue with tooltip. 

Do you means to say that the text is not completely visible? or do you want to align text if different manner. Please specify your issue.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
14 0 0

Dear Nithony,

 

Theme is still under construction not yet to live. As far i know you can access the preview within the next 14 days. please check this new link: https://uc9piszatn7loh9p-22495265.shopifypreview.com

0 Likes
Tourist
14 0 0

Dear Pallavi,

 

Tooltip text is not completely visible in mobile view.  

0 Likes

Success.

Astronaut
1011 131 240

I can see it now, you need to change some css on your tooltip text. Try this instead:

 

 .tooltiptext {
  visibility: hidden;
    background-color: #1e1b1d;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 98%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 13px;
}

And then get rid of "overflow: hidden" on column01.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
14 0 0

Dear Ninthony,

 

Now the Tool-tip is looking great. Thanks a lot for your valuable solution.

0 Likes
Highlighted
Astronaut
1011 131 240

Glad it helped, keep me in mind if you want to make larger edits to your site  ~_^

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes