Mobile friendly tool tip

AcademicNeilAcademicNeil UKCommunity Member Qubie ✭
edited March 2020 in Custom Code

Mobile friendly tool tip

Hi all,

I've seen a few posts about creating a tool tip when using a mobile device but I'm still having difficulty. I want to create a tool tip for answer choices - where a hint pops up when you hover over/click on a word in the answer choices. A tooltip for the desktop version was easy - it’s a simple case of adding the short code in-text word in the gap where you put one of the possible answers. (Annoyingly, I wanted you see the code there but it creates the tooltip instead -sorry!).

However, I am really struggling to get the mobile version working. On another thread, someone mentioned the following website, which appears to have pretty clear step-by-step instructions.

https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

I cut-and-pasted the CSS code into Look and Feel / Style / Custom CSS code
I then cut-and-pasted the Javascript into the Advanced question options (the cog next to each question) /Add Javascript
I then cut-and-pasted the HTML code into the answer choice.

However, it doesn't work. Am I putting it all in the right places? Am I missing something out?

I've tried, as someone suggested, changing the $ symbols for JQuery, but that doesn't make a difference to getting the tool tip to work.

If anyone has any suggestions, please reply. I would really appreciate it. With next to no knowledge of Javascript, HTML or CSS, I don't really know what to do when the step-by-step instructions don't work.

Thank you very much in advance .

Neil

Best Answer

  • AcademicNeilAcademicNeil UKCommunity Member Qubie ✭
    Accepted Answer

    Solved, thanks to walli on another thread.

    Two things were needed in addition to what I put in the previous post.
    In Javascript, you need to make sure the Javascript code goes in
    JavaScript addOnReady

    And then for the HTML code, you need to click on the little arrow to the right side of your answer-option. A small list will unfold, that should also contain "Rich content editor", which you should select. In the box that will open afterwards, look for a button on the top right that looks like this: < >

    That's the button that enables Source-Code mode, which accepts the html code.

    Hope that helps if you too are struggling.

    Neil

Answers

  • Isabelle_TIsabelle_T Novato, CA, USACommunity Member - Trial User Qubie ✭

    Hi Neil, I'm actually having trouble with this as well and wondered if there was an extra step that is needed but maybe you didn't mention? When I go to preview mode on my laptop, I can see it if I hover with the mouse and I can see in the mobile version on the side bar that there is something going on with the word for which I want to the tooltip. But if I try to select the word on my touchscreen laptop or on preview on my actual mobile device, it does nothing. I'd appreciate your insight!

  • Isabelle_TIsabelle_T Novato, CA, USACommunity Member - Trial User Qubie ✭

    Responding to my own post--I realized I had replaced $ with JQuery, not jQuery (didn't realize it was case-sensitive!).

  • klkklk Community Member Qubie ✭

    I've followed all these tips. In the preview, I can see the pop-up text on the mobile version. However, on the phone it isn't visible. Any suggestions would be welcome.

Sign In to Comment