Hover text within hot spot image boxes in survey | XM Community
Skip to main content

Hi There,
I am programming a survey with the hot spot function for respondents to select an area of an image as their answer. Has anyone had any experience with developing hover text that shows when a respondent puts their mouse over a box to give a definition/content?
If there are any examples/tips that could be shared this would be greatly appreciated.
Thanks in advance!
If you need any further information from my end please let me know.

Hi there, if you still need, I was able to put something like this by adding a </a> to the Region svgs after grabbing their selectors. The selectors for the Regions follow the nth child format where the first nth child that corresponds to a Region is 3 + the number of Regions, like the below:<br><ul><li>2 Regions (5,6)</li><br><li>3 Regions (6,7,8)</li><br><li>4 Regions (7,8,9,10)</li></ul><br>To give it a try, first create a Hot Spot question that is set to Dislike/Like and add 3 regions to it. Next, add the below to the question's JavaScript in the OnReady section:<br>var qid = this.questionId;<br> <br>var region1 =  '#'+qid+'> div.Inner.BorderColor.LikeDislike > div > fieldset > div > div > div > svg > path:nth-child(6)';<br>var title1 = document.createElementNS('http://www.w3.org/2000/svg', 'title');<br>title1.textContent = "Hover Text 1";<br><br>var region2 =  '#'+qid+'> div.Inner.BorderColor.LikeDislike > div > fieldset > div > div > div > svg > path:nth-child(7)';<br>var title2 = document.createElementNS('http://www.w3.org/2000/svg', 'title');<br>title2.textContent = "Hover Text 2";<br> <br>var region3 =  '#'+qid+'> div.Inner.BorderColor.LikeDislike > div > fieldset > div > div > div > svg > path:nth-child(8)';<br>var title3 = document.createElementNS('http://www.w3.org/2000/svg', 'title');<br>title3.textContent = "Hover Text 3";<br><br>setTimeout(function(){<br> <br>jQuery(title1).appendTo(region1);<br>jQuery(title2).appendTo(region2);<br>jQuery(title3).appendTo(region3);<br><br>},1000);<br><img src="https://uploads-us-west-2.insided.com/qualtrics-us/attachment/CR2A1GYUYUI3_hotspothover.png" alt="HotSpotHover.png"/></p></body> <hr class="seperator m-b-0 "> </div> </div></div> <div class="box box__pad"> <div class="box__content qa-reply reply-editor-wrapper"> <h3>Leave a Reply</h3> <br/> <div data-preact="groups-destination/GroupJoin" data-props='{"publicGroupMessage": true}'></div> <div data-preact="editor/postEditor" data-props='{"disableFileAttachments":true,"isControl":false,"topicId":17062,"redirect":true,"isGuest":true,"placeholder":"topic.reply.placeholder.textarea"}' ></div> </div> </div> </div> </div> </div> <div class="col col--side Sidebar qa-div-sidebar custom-sidebar"> <div class="module Sidebarmodule"> <div data-preact="related-topics/RelatedTopics" data-props="{"widgetTitle":"Related posts","pageSize":"3"}"> </div> </div> </div> </div> </div> <div class="full-width Template-secondary"> <div class="sitewidth"> <div class="col col--main has--side"> </div> </div> </div> <div class="full-width Template-footer"> <div data-preact="powered-by-insided/index" class="powered-by-insided-footer" data-props="{"rootUrl":"community.qualtrics.com","termsConditions":"\/site\/terms","cookieConfig":{"use_external_modal":false,"mapping":{"required":1,"anonymous":2,"all":3}},"communityVisibility":"public","isGuestUser":true,"phrases":{"Forum":{"branded.back_to_top":"Back to top","Terms & Conditions":"Terms & Conditions","cookiepolicy.link":"Cookies"}}}"><div class="Template-footer"><div class="sitewidth box box--blend" data-component="scrollTopStickyButton"><div class="templatefoot"><a href="https://www.gainsight.com/customer-communities/" class="logo-gainsight" title="Visit Gainsight.com" target="_blank" rel="noreferrer" aria-label="Powered by Gainsight"><span class="is-hidden">Powered by Gainsight</span></a></div><div class="templatefoot-privacy-links"><a href="/site/terms" aria-label="Terms & Conditions">Terms & Conditions</a></div><span class="scroll-to-top-sticky-button js-scrollto widget--base-shadow is-hidden-S custom-scroll-to-top" title="Back to top" aria-label="Back to top"></span></div></div></div> </div> <div class="modals box is-hidden js-legacy-modals"> <div class="qa-register-modal" data-helper="modal" data-data='{"modal_id": "register", "mainClass": "modal--register"}' id="modal_register" > <label for="" > </label> <h2> Sign up </h2> <p> Already have an account? <a class="js-open-modal qa-register-have-account-link" data-modal="login">Login</a> </p> <div id="modal_login" > <h4>Social Login </h4> <a class="btn--cta btn--sso qa-sso-openid" href="https://community.qualtrics.com/ssoproxy/login?ssoType=openidconnect" target="_top"> Login with OpenIdConnect </a> </div> <script type="application/javascript"> if (document.querySelector('.email_repeat')) { document.querySelector('.email_repeat').style.display = 'none' } //invite tricks if(document.querySelector('#register_is_invite') && document.querySelector('#register_is_invite').value) { let name = document.querySelector('#register_user_username'); if (name.value === '--removed--') { name.value = '' } let email = document.querySelector('#register_user_email') email.readOnly = 1 email.classList.add('register_user_email--disabled') } </script> </div> <div class="qa-login-modal" data-helper="modal" data-data='{"modal_id": "login", "mainClass": "modal--login"}' id="modal_login" > <label for=""> </label> <h2>Login to the community</h2> <h4>Social Login </h4> <a class="btn--cta btn--sso qa-sso-openid" href="https://community.qualtrics.com/ssoproxy/login?ssoType=openidconnect" target="_top"> Login with OpenIdConnect </a> </div> <div class="qa-forgot-modal" data-helper="modal" data-data='{"modal_id": "forgot", "mainClass": "modal--forgot"}' id="modal_forgot" > <p>Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.</p> <form name="forgotPassword" method="post" action="/member/forgotPassword" class="form js-ajax-form--forgot" id="form--forgot__835209957"> <div class="js-notification"> </div> <div class="form__row"> <div class="first"> <label class="label required" for="forgotPassword_username"> Enter your e-mail address </label> </div> <div class="second"> <input type="text" id="forgotPassword_username" name="forgotPassword[username]" required="required" /> </div> </div> <div class="form-row first"> <button type="submit" id="forgotPassword_submit" name="forgotPassword[submit]" class="btn btn--cta qa-submit-button"> Send </button> <a href="#" class="group__item end js-open-modal qa-forgot-password-overview-link" data-modal="login">Back to overview</a> </div> <input type="hidden" id="forgotPassword__token" name="forgotPassword[_token]" value="ynqUd48vPCa2jA8HnRkQlv2XSQKmR_Vs6p8TegtIRfA" /> </form> </div> <div class="qa-report-modal" data-helper="modal" data-data='{"modal_id": "report", "mainClass": "modal--report"}' id="modal_report" > </div> <div class="attachments--modal" data-helper="modal" data-data='{"modal_id": "attachments-pending-modal"}'> <h2>Scanning file for viruses.</h2> <p>Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.</p> <a href="#" class="mfp-close btn--cta">OK</a> </div> <div class="attachments--modal" data-helper="modal" data-data='{"modal_id": "attachments-infected-modal"}'> <h2>This file cannot be downloaded</h2> <p>Sorry, our virus scanner detected that this file isn't safe to download.</p> <a href="#" class="mfp-close btn--cta">OK</a> </div> </div> <div><script type="text/javascript">window.inSidedData = {"communityId":"qualtrics-us","environment":"production","language":"en","device":"desktop","user":{"userid":null,"name":"guest","role":"roles.guest","mainRole":"roles.guest","rank":"","avatar":"","rankIcon":"","rankName":"","isModerator":false,"pmUnreadCount":0,"pmTotalCount":0,"topicsCount":0,"repliesCount":0,"solvedCount":0,"loginSource":null,"registerSource":null},"page":{"pageNumber":1,"name":"Topic","path":"qualtrics-us:Content:Topic:Hover text within hot spot image boxes in survey","section":"Content","site":"qualtrics-us","title":"Topic:Hover text within hot spot image boxes in survey","url":"/custom-code-12/hover-text-within-hot-spot-image-boxes-in-survey-17062","firstRender":false},"form":{"name":"","step":""},"content":{"category":{"id":12,"title":"Custom Code","type":"default"},"topic":{"id":17062,"title":"Hover text within hot spot image boxes in survey","type":"question","content_type":null,"source_id":null,"created":1634121480,"replies":1,"is_sticky":"false","prefix":"vraag","tags":"Hot Spot Question,CSS,Javascript,Custom Code"},"post":{"id":null},"path":"Custom Code:Hover text within hot spot image boxes in survey"},"search":{"phrase":null,"count":null}}</script></div> <div data-preact="cookie-banner/index" class="" data-props="{"level":1,"termsConditions":"\/site\/terms","cookieConfig":{"use_external_modal":false,"mapping":{"required":1,"anonymous":2,"all":3}},"phrases":{"Forum":{"cookiepolicy.title":"Cookie policy","cookiepolicy.content":"We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. <a href=\"{link}\">Learn more about our cookies.<\/a>","cookiepolicy.button":"Accept cookies","cookiepolicy.button.deny":"Deny all","cookiepolicy.link":"Cookies","cookiepolicy.modal.title":"Cookie settings","cookiepolicy.modal.content":"We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. <a href=\"{link}\">Learn more about our cookies.<\/a>","cookiepolicy.modal.level1":"Basic<br>Functional","cookiepolicy.modal.level2":"Normal<br>Functional + analytics","cookiepolicy.modal.level3":"Complete<br>Functional + analytics + social media + embedded videos"}}}"></div> <script> class CustomerEducationElement extends HTMLElement { constructor() { super(); // Attach a shadow DOM with mode 'open' this.attachShadow({ mode: 'open' }); } // Watch for changes in these attributes static get observedAttributes() { return ['data-config']; } attributeChangedCallback(name, oldValue, newValue) { if(oldValue && oldValue !== newValue) { this.updateDesignTokens(newValue); } } connectedCallback() { this.render(); } render() { try{ const _templateId = this.getAttribute('data-template-id'); // Get the template content const template = document.getElementById(_templateId); this.shadowRoot.appendChild(template.content.cloneNode(true)); this.updateDesignTokens(this.getAttribute('data-config')); } catch(error){ console.error(`Failed to render CE widget template ${_templateId}`, error); } } updateDesignTokens(config) { config = this.parseConfig(config); if(config) { const styles = { '--np-button-color': config['--config-button-cta-background-color'], '--np-button-hover-color': config['--config-button-cta-hover-background-color'], '--np-button-font-color': config['--config-button-cta-color'], '--np-header-color': config['--config-header-color'], '--np-header-font-color': config['--config-header-color'], '--np-header-font-hover-color': config['--config-anchor-base-color'], '--np-learning-header-color': config['--config-header-color'], '--np-learning-header-font-color': config['--config-header-color'], '--np-learning-header-font-hover-color': config['--config-anchor-base-color'], '--np-learning-link-button-color': config['--np-learning-link-button-color'], '--np-learning-progress-bar-color': config['--config--main-color-brand'] }; for (const [property, value] of Object.entries(styles)) { this.shadowRoot.host.style.setProperty(property, value); } } } parseConfig(config) { try { return JSON.parse(config); } catch (error) { console.error(`Failed to parse the Branding config`, error); } } } customElements.define('customer-education-element', CustomerEducationElement); </script> <div class="ssi ssi-footer custom-footer"> <!-- global styles --> <!-- TODO: ?v=1 is a hack to get around Akamai caching; we need to fix this with a scalable versioning system --> <link rel="preload" as="style" href="https://www.qualtrics.com/assets/dist/css/font.css" /> <link rel="stylesheet" href="https://www.qualtrics.com/assets/dist/css/font.css" /> <style> .row { display: flex !important; flex-wrap: wrap !important; justify-content: space-between; } .text-left { text-align: left !important; } .justify-content-end { justify-content: flex-end !important; } @media (max-width: 500px) .row { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; } .container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm { width: 90%; padding-right: 30px; padding-left: 30px; margin-right: auto; margin-left: auto; padding-top: 50px; } a { color: black; } .col-sm-6 { margin-right: 15px; } @media (min-width: 576px) .col-sm-6 { flex: 0 0 50%; max-width: 50%; } footer { font-size: 13.05px; } .list-unstyled { padding-left: 0; list-style: none; justify-content: left !important; } .headline-eyebrow { font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; } .gradient-bar { mix-blend-mode: multiply; filter: blur(110px); background: linear-gradient(to right, #e372ff 6%, #a24af1 12%, #5f1ae2 18%, #4b2ce6 24%, #3341e4 30%, #1955e2 36%, #017be4 42%, #008ce8 48%, #019fed 54%, #00b1ec 60%, #02bcde 66%, #03c6cb 72%, #00cfb8 78%, #21d8a7 84%); background-repeat: no-repeat; background-size: contain; background-position: center; min-height: 80px;} @media (min-width: 992px) .col-lg-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } @media (min-width: 768px) .col-md-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } @media (min-width: 576px) .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .pb-3, .py-3 { padding-bottom: 20px !important; padding-top:20px; } </style> <div id="consent_blackbar"></div> <footer class="site-footer anchor-inherit" role="contentinfo" data-gacontainer="garegion" data-gatext="footer"> <div class="container text-left"> <div class="row py-5 py-lg-6"> <div class="col-lg-6"> <h3 class="headline-eyebrow mb-1">Popular Use Cases</h3> <div class="row mb-5 mb-lg-0"> <div class="col-sm-6"> <ul class="list-unstyled"> <li><a href="https://www.qualtrics.com/customer-experience/">Customer Experience Management (CXM)</a> </li> <li><a href="https://www.qualtrics.com/customer-experience/nps-software/">NPS Software</a> </li> <li><a href="https://www.qualtrics.com/employee-experience/employee-engagement/">Employee Engagement Software</a></li> <li><a href="https://www.qualtrics.com/core-xm/survey-software/">Online Survey Software</a> </li> <li><a href="https://www.qualtrics.com/market-research/">Market Research Software</a></li> <li><a href="https://www.qualtrics.com/employee-experience/360-degree-feedback/">360° Employee Feedback</a></li> </ul> </div> <div class="col-sm-6"> <ul class="list-unstyled"> <li><a href="https://www.qualtrics.com/customer-experience/surveys/">Customer Survey Software</a></li> <li><a href="https://www.qualtrics.com/core-xm/website-app-feedback-surveys/">Website & App Feedback</a> </li> <li><a href="https://www.qualtrics.com/customer-experience/voice-of-customer/">Voice of Customer Software</a></li> <li><a href="https://www.qualtrics.com/employee-experience/employee-pulse-surveys/">Employee Pulse Surveys</a></li> <li><a href="https://www.qualtrics.com/employee-experience/new-hire-surveys/">Onboarding & New Hire Surveys</a></li> <li><a href="https://www.qualtrics.com/customer-experience/reputation-management/">Online Reputation Management</a></li> </ul> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mb-5 mb-md-0"> <h3 class="headline-eyebrow mb-1">Support</h3> <ul class="list-unstyled"> <li><a href="https://www.qualtrics.com/support-center/" rel="nofollow">Submit a Ticket</a></li> <li><a href="https://www.qualtrics.com/support/" rel="nofollow">Online Help</a></li> <li><a href="https://www.qualtrics.com/community/?utm_lp=website+footer" rel="nofollow">Qualtrics Community</a> </li> <li><a href="https://www.qualtrics.com/services/" rel="nofollow">Professional Services</a></li> <li><a href="https://www.qualtrics.com/product-updates/" rel="nofollow">Product Roadmap</a></li> <li><a href="https://www.qualtrics.com/status/" rel="nofollow">Status</a></li> </ul> </div> <div class="col-sm-6 col-md-4 col-lg-2 mb-5 mb-md-0"> <h3 class="headline-eyebrow mb-1">Company</h3> <ul class="list-unstyled"> <li><a href="https://www.qualtrics.com/about/" rel="nofollow">About Us</a></li> <li><a href="https://www.qualtrics.com/investors/">Investors</a></li> <li><a href="https://www.qualtrics.com/x4summit/">X4 Summit</a></li> <li><a href="https://www.qualtrics.com/careers/" rel="nofollow">Careers</a></li> <li><a href="https://www.qualtrics.com/partnerships/" rel="nofollow">Partnerships</a></li> <li><a href="https://www.qualtrics.com/contact/" rel="nofollow">Contact Us</a></li> <li><a href="https://www.qualtrics.com/news/">Newsroom</a></li> </ul> </div> <div class="col-sm-6 col-md-4 col-lg-2 "> <h3 class="headline-eyebrow mb-1">Resources</h3> <ul class="list-unstyled"> <li><a href="https://www.qualtrics.com/customers/" rel="nofollow">Customers</a></li> <li><a href="https://www.qualtrics.com/marketplace/integrations/">Integrations</a></li> <li><a href="https://www.qualtrics.com/blog/">Blog</a></li> <li><a href="https://www.qualtrics.com/events/">Events</a></li> <li><a href="https://www.qualtrics.com/training/" rel="nofollow">Training & Certification</a></li> <li><a href="https://www.qualtrics.com/resources/">Resource Library</a></li> <li><a href="https://basecamp.qualtrics.com/?utm_lp=nav-footer">XM Basecamp</a></li> </ul> </div> </div> <hr> <div class="site-footer-end list-unstyled row py-3"> <div id="copyright-date" class="col-sm-6 col-lg-2 mb-2 mb-lg-0"> © </div> <div class="col-sm-6 order-1 order-sm-0 order-lg-1 col-lg-1 d-lg-flex justify-content-end mb-sm-2 mb-lg-0"> <a class="px-1" href="https://www.facebook.com/Qualtrics/"> <img src="https://www.qualtrics.com/m/assets/global/logos/social-facebook.svg" height="16"> </a> <a class="px-1" href="https://twitter.com/Qualtrics/"> <img src="https://www.qualtrics.com/m/assets/global/logos/social-twitter.svg" height="16"> </a> <a class="px-1" href="https://www.linkedin.com/company/qualtrics"> <img src="https://www.qualtrics.com/m/assets/global/logos/social-linkedin.svg" height="16"> </a> </div> <li class="col-sm-6 col-lg mb-2 mb-lg-0"><a href="https://www.qualtrics.com/terms-of-service/" rel="nofollow">Terms of Service</a></li> <li class="col-sm-6 col-lg mb-2 mb-lg-0"><a href="https://www.qualtrics.com/privacy-statement/" rel="nofollow">Privacy Statement</a></li> <li class="col-sm-6 col-lg mb-2 mb-lg-0"><a href="https://www.qualtrics.com/security-statement/" rel="nofollow">Security Statement</a></li> </li> <li id="teconsent-holder" class="col-2 col-lg "> <!-- OneTrust Cookies Settings button start --> <button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie Settings</button> <!-- OneTrust Cookies Settings button end --> </div> </div> </footer> <div class="gradient-bar w-100" style=""></div> </div> <input id="csrftoken" type="hidden" value="Qa2FIJx02-vHl-IABU3W8Gi9cces1ZS8So8gJDs_fX4"/> <div data-preact="site-wide/index" class="" data-props="{}"><div></div></div> <script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/600.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/498.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/755.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/359.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/18.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/74.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/911.js'></script><script crossorigin='anonymous' src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/preact-app.js' id='insided-preact-app' data-basepath='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/' data-environment='production' data-region='us-west-2' data-communityId='qualtrics-us' data-modules='["badges","reputation","unreadPostCounter","metadataPostDetails","ideation","subforumSubscription","mentions","rateLimiting","privateMessage","TopicSocialShare","fileAttachments","channelConfiguration","pageConfiguration","webmasterManagement","nonModeratorsCanUploadImagesAndVideos","knowledgeBase","event","eventEngagement","publicTagManagement","publicTagAutoSuggestion","publicTagDestination","integrationsApi","integrationsApps","userOverviewStatistics","rank","zendeskFederatedSearch","zendeskTicketEscalation","thirdPartyScripts","customCss","pointSystem","ideationV2","analyticsV2","analyticsV2ProductFeedback","privateGroup","moderationOverviewBetaDefault","emailCampaigns","imageResizingAndAlignment","richTopicCards","productAreas","convertQuestionsToIdeas","skilljarFederatedSearch","loginWithEmail","hiddenGroup","NewUICardGroupOverview","enableGroupTags","CommunityOverview","changeAuthorOfPublishedContent","thoughtIndustries","intercomFederatedSearch","intercomCreateConversations","aiFeaturesForCM","aiFeatures","categoriesV2","categoriesConfig","categoriesV2ConfigCommunity","categoriesV2Community","trackingEnabled","notificationCenter","categoriesV2Destination","ccRebranding","widgetSiteIdentity","eventSubscriptions","aiFeedback","customizationSettings","adminSeats","articleScheduling","controlSideMenu","conversationalWidget","customPages","destinationCustomization","emailTemplate","emoji","group","selfBadges","selfServiceSso","subtitleAndBackgroundToWidgets","teamNotes","zapier","userSegments","gainsight","gainsightPlatformSso","eventsCustomization"]' data-userPermissions='{"readableCategories":[],"permissions":[]}' data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/css/forum.css' data-defaultCdn='' data-fb-app-id='' data-communityUrl='https://community.qualtrics.com' data-controlUrl='https://qualtrics-us.insided.com' data-eventLogger='https://t3t09eztsd.execute-api.us-west-2.amazonaws.com/v1/event' data-application='forum' data-cookieConfig='{"use_external_modal":false,"mapping":{"required":1,"anonymous":2,"all":3}}' data-defaultCookieLevel='1' nonce='' data-search='{"client_id":"IC23ZXNZKT","token":"ZDg5MmFhYjA0Y2Q4NjE0MThmYTBkN2U2N2Q5NzU4MzgzM2JkNjgyZGIxY2RkNmFiOWQ4MmRlMjdkN2I0ODNhOWZpbHRlcnM9Zm9ydW0lM0ErMTArT1IrZm9ydW0lM0ErMTAwK09SK2ZvcnVtJTNBKzExK09SK2ZvcnVtJTNBKzEyK09SK2ZvcnVtJTNBKzEzK09SK2ZvcnVtJTNBKzE4K09SK2ZvcnVtJTNBKzE5K09SK2ZvcnVtJTNBKzIrT1IrZm9ydW0lM0ErMytPUitmb3J1bSUzQSs0K09SK2ZvcnVtJTNBKzUyK09SK2ZvcnVtJTNBKzU0K09SK2ZvcnVtJTNBKzU2K09SK2ZvcnVtJTNBKzU4K09SK2ZvcnVtJTNBKzYyK09SK2ZvcnVtJTNBKzY0K09SK2ZvcnVtJTNBKzY2K09SK2ZvcnVtJTNBKzY4K09SK2ZvcnVtJTNBKzc3K09SK2ZvcnVtJTNBKzc4K09SK2ZvcnVtJTNBKzc5K09SK2ZvcnVtJTNBKzgrT1IrZm9ydW0lM0ErODArT1IrZm9ydW0lM0ErODErT1IrZm9ydW0lM0ErODIrT1IrZm9ydW0lM0ErODMrT1IrZm9ydW0lM0ErODUrT1IrZm9ydW0lM0ErOTArT1IrZm9ydW0lM0ErOTErT1IrZm9ydW0lM0ErOTIrT1IrZm9ydW0lM0ErOTMrT1IrZm9ydW0lM0ErOTQrT1IrZm9ydW0lM0ErOTUrT1IrZm9ydW0lM0ErOTYrT1IrZm9ydW0lM0ErOTkrT1IrZm9ydW0lM0ErNzErT1IrcHVibGljX3JlY29yZCUzQXRydWUmcmVzdHJpY3RJbmRpY2VzPXF1YWx0cmljcy11cyUyQSZxdWVyeUxhbmd1YWdlcz0lNUIlMjJlbiUyMiU1RCZ2YWxpZFVudGlsPTE3MzI1NzI4MzQ=","basicToken":"NTFhMDVkNTU5N2I0MzU4ZWFlZGI1NzgwYjBmMWViMTU0NmNkN2JjM2UyNTBiYTVmZDQwNjM2ZmM5MTg1NmEzN2ZpbHRlcnM9cHVibGljX3JlY29yZCUzQXRydWUmcmVzdHJpY3RJbmRpY2VzPXF1YWx0cmljcy11cyUyQSZxdWVyeUxhbmd1YWdlcz0lNUIlMjJlbiUyMiU1RCZ2YWxpZFVudGlsPTE3MzI1NzI4MzQ=","isZendeskFederatedSearchEnabled":false,"hiddenCategories":[]}' data-selectedCookieLevel='1'></script> <script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/600.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/755.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/729.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/18.js'></script><script src='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/911.js'></script><script src="https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/app.js" id="insided-app" data-basepath="https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/js/" nonce="" data-environment="production" data-region="us-west-2" data-communityId="qualtrics-us" data-modules='["badges","reputation","unreadPostCounter","metadataPostDetails","ideation","subforumSubscription","mentions","rateLimiting","privateMessage","TopicSocialShare","fileAttachments","channelConfiguration","pageConfiguration","webmasterManagement","nonModeratorsCanUploadImagesAndVideos","knowledgeBase","event","eventEngagement","publicTagManagement","publicTagAutoSuggestion","publicTagDestination","integrationsApi","integrationsApps","userOverviewStatistics","rank","zendeskFederatedSearch","zendeskTicketEscalation","thirdPartyScripts","customCss","pointSystem","ideationV2","analyticsV2","analyticsV2ProductFeedback","privateGroup","moderationOverviewBetaDefault","emailCampaigns","imageResizingAndAlignment","richTopicCards","productAreas","convertQuestionsToIdeas","skilljarFederatedSearch","loginWithEmail","hiddenGroup","NewUICardGroupOverview","enableGroupTags","CommunityOverview","changeAuthorOfPublishedContent","thoughtIndustries","intercomFederatedSearch","intercomCreateConversations","aiFeaturesForCM","aiFeatures","categoriesV2","categoriesConfig","categoriesV2ConfigCommunity","categoriesV2Community","trackingEnabled","notificationCenter","categoriesV2Destination","ccRebranding","widgetSiteIdentity","eventSubscriptions","aiFeedback","customizationSettings","adminSeats","articleScheduling","controlSideMenu","conversationalWidget","customPages","destinationCustomization","emailTemplate","emoji","group","selfBadges","selfServiceSso","subtitleAndBackgroundToWidgets","teamNotes","zapier","userSegments","gainsight","gainsightPlatformSso","eventsCustomization"]' data-cssLink='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/dist/css/forum.css' data-defaultCdn='https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/control/assets' data-fb-app-id='' data-language='en'></script><script nonce="">app.init([{"model":"csrf","data":{"name":"yip_csrf_token","token":"Qa2FIJx02-vHl-IABU3W8Gi9cces1ZS8So8gJDs_fX4"}},{"el":"head","component":"google-analytics","data":{"tokens":[{"token":"UA-XXX","name":"insided","verification":""}],"privacyLevel":1,"nonce":""}},{"el":".js-ajax-form--registration","component":"ajax-form"},{"el":"#form--forgot__835209957","component":"ajax-form"},{"el":".js-open-modal","helper":"show-modal"},{"data":{"map":null,"breadcrumbData":[{"url":"\/","title":"XM Community"},{"url":"\/developer-corner-9","title":"Developer Corner"},{"url":"\/custom-code-12","title":"Custom Code"},{"url":"\/custom-code-12\/hover-text-within-hot-spot-image-boxes-in-survey-17062","title":"Hover text within hot spot image boxes in survey"}]},"component":"tracker"},{"el":"body","helper":"collapse"},{"el":"body","helper":"ajax-link"},{"model":"global_translations","data":{"ajax-form":{"connection_error":"Unable to submit form. Please refresh the page and try again."},"modal":{"close":"Close","loading":"Loading","gallery_previous":"Previous","gallery_next":"Next","gallery_counter":"%curr% of %total%","image_error":"The image could not be loaded","content_error":"The content could not be loaded"}}},{"view":"MainNavigation","el":".js-main-navigation"}]);</script> </main> <script src="https://dowpznhhyvkm4.cloudfront.net/2024-11-25-14-15-08-c911d353b7/control/assets/common/js/jquery.yiiactiveform.js" nonce=""></script> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"5364be9000","applicationID":"625666988,438654967,16947947","transactionName":"YgFTY0QFW0sHUkVQWVtLcFRCDVpWSXhfal9RAVVrdQtbTBReXVVTRzhyWFsJQFYPRUhlZ0ABQkNfC1t7CV9FS1lZCFRFGRddVxE=","queueTime":0,"applicationTime":660,"atts":"TkZEFQwfSBREUBMDTUgZ","errorBeacon":"bam.nr-data.net","agent":""}</script></body> </html>