Adding a pop-up for both computer and mobile devices | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Question

Adding a pop-up for both computer and mobile devices

MikeBot
Level 2 ●●
Forum|alt.badge.img+8

Hi all,

I am wondering if there is a way to add an option to a survey question, where respondent can click on a word or a button to then show a pop-up box with more information?

I tried the method described in the below, but couldn’t get it to work. 

I followed the above, without really understanding it (!!) and I get my key word underlined and showing as a tool tip, and the info will show if I hover. 
However, how do I get this key word to be clickable on a mobile device? 

 

The code I have used in my survey question (HTML view) is below. 

The word “here” is where the tooltip is shown - but is not clickable on a mobile device.

My apologies in advance if this is an obvious fix!

 

Thanks, Mike.

 

HTML: 

 

Have you, or a spouse/ family member, had any of the following symptoms?


<b>Please hover <abbr title="Cough; cold; sore throat" rel="tooltip"><span style="color:red;">here </abbr><span style="color:black;"> for examples of symptoms</span></span></b>

 

 

ana_velez
Shivamvig_sv
2 people like this
  • ana_velez
    ana_velez
  • Shivamvig_sv
    Shivamvig_sv

3 replies

T
Forum|alt.badge.img

I actually just made a video that shows you how to generate interactive pop-ups that allow rich text, embedded images, heck you can basically put anything into these pop-ups.  Basically, it uses the JavaScript modal. 

I put the code in the video description.  You basically just throw into the HTML view part of the question.  Here's the video if it would be helpful:

https://youtu.be/tXj0q5GryJs

PeeyushBansal
Level 6 ●●●●●●
Forum|alt.badge.img+39
  • PeeyushBansal
  • Level 6 ●●●●●●
  • 1148 replies
  • April 14, 2025

​@TLDW Tutorials ​@TLDW Tutorials  can you share the code here to be added.

Best Regards, Peeyush
PeeyushBansal
Level 6 ●●●●●●
Forum|alt.badge.img+39
  • PeeyushBansal
  • Level 6 ●●●●●●
  • 1148 replies
  • April 14, 2025

When I am using this code, question is not appearing on mobile

 

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .modal-content {
      padding: 0 !important;
      margin: 0 !important;
    }
    .modal-body {
      padding: 20px 30px; /* Added buffer on the top, bottom, left, and right */
    }
    .container, .modal-dialog {
      margin-bottom: 0 !important;
    }
    .btn-primary {
      color: white !important; /* Ensure button text is always white */
    }
  </style>
</head>
<body>

<div class="container" style="padding: 0; margin: 0;">



  <p>How many days do you work <a href="#" data-toggle="modal" data-target="#myModal">remotely</a>?</p>

  <div class="modal fade" id="myModal" data-backdrop="false">
    <div class="modal-dialog modal-lg" style="margin-bottom: 0;">
      <div class="modal-content" style="margin: 0; padding: 0;">        
        <div class="modal-header">
          <h2 class="modal-title">Remote Work Definition</h2>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <b>Remote work</b> is defined as a flexible work arrangement in which an employee is scheduled to perform work at an alternative worksite.
          <br><br>
          <u>Note</u>: Taking your laptop to the downstairs lunchroom at work does not count as remote work.
          <br><br>
          <p>How about an image?</p>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" style="width: 100%; height: auto;">  
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

 

Best Regards, Peeyush

Leave a Reply


Terms & Conditions