CSS for mobile responsive tooltips?

Home Forums All Other Themes CSS for mobile responsive tooltips?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #150705
    Rachel KirkRachel Kirk
    Participant
    • Topics: 43
    • Replies: 108
    • Total: 151
    Member since: October 25, 2019

    Hi, I’m using Design Agency theme in Elementor & have added some CSS & HTML to get tool tips to appear on certain words for definitions. My problem is that I can set the position of the tool tip fine for the desktop & tablet view but it’s off screen for the mobile view. Can I set a different position only for mobile responsive?

    The code I’m using follows;

    HTML//

    <div>Add Some Text Here
    <div class=”tooltip”> Hover over me
    <span class=”tooltiptext”> Tooltip text </span>
    </div>
    Add some text here too</div>

    CSS//

    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor:help;
    }

    .tooltip .tooltiptext {
    visibility: hidden;
    width: 500%;
    background-color: blue;
    color: #fff;
    border-radius: 6px;
    padding: 5px 5px 5px ;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -250%;
    }
    .tooltip .tooltiptext::after {
    content: “”;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent blue transparent;
    }

    .tooltip:hover .tooltiptext {
    visibility: visible;
    }

    #150726
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30962
    • Total: 30962
    Member since: August 16, 2013

    Hi,

    Your website is on under construction mode. Therefore we are unable to check the issue.

    Regards,
    Brad

    #150798
    Rachel KirkRachel Kirk
    Participant
    • Topics: 43
    • Replies: 108
    • Total: 151
    Member since: October 25, 2019

    I have sent my login details to have a closer look. The page you should look at is: https://www.thenestsouthwark.org.uk/corona-virus-covid-19/

    There are 2 tool tips coded in. One in the first paragraph ‘pandemic’ and one in the first Accordion section ‘fake news’.

    Thanks

    Kirk

    #150894
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30962
    • Total: 30962
    Member since: August 16, 2013

    Hi,

    Issue have been resolved. Kindly check and confirm.

    Regards,
    Brad

    #150926
    Rachel KirkRachel Kirk
    Participant
    • Topics: 43
    • Replies: 108
    • Total: 151
    Member since: October 25, 2019

    Thanks, yes the mobile tool tips are now working. Many thanks

    peace

    #151005
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30962
    • Total: 30962
    Member since: August 16, 2013

    🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.