how to reformat tooltip to fit phone or tablet screen


I am looking to ensure that my tooltips work with the screen of my users. For example, when i tested the survey on my phone, my tooltips expand outside of my phone’s screen which when i try to pan right to read the tooltip, i end up being on the next page. As each question is required, this causes a lot of distress despite creating the survey myself.

Any help to resolve this will be greatly appreciated.

Lola Gill answered
    Lola Gill 6.97K Rep.

    This will probably require some fiddling with the provided CSS code. You could do some trial & error with the padding values in the second section of the code provided here:

    .tip > span {
    display: none;
    z-index: 100;
    position: absolute;
    padding: .6em;
    padding-left: 1em;
    top: 1.5em;
    left: 2.4em;
    width: 10em;
    background-color: [template(“page background color”)];
    border: 1px solid [template(“base font color”)];
    border-radius: 0.5em;

    I suggest adjusting the padding and padding-left values up/down and testing on your
    device. You can also adjust the top, left, and width values up/down.

    Hope this gives you some options to test with!

    Lola Gill answered


      Question stats

      • Active
      • Views2590 times
      • Answers1 answer
      • Followers1 follower