Tooltip text responsive (Boost theme)

Solved
Tourist
13 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
767 79 152

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
Shopify Partner
676 95 92

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 custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
0 Likes
Tourist
13 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
13 0 0

Dear Pallavi,

 

Tooltip text is not completely visible in mobile view.  

0 Likes

Success.

Astronaut
767 79 152

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
13 0 0

Dear Ninthony,

 

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

0 Likes
Highlighted
Astronaut
767 79 152

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