{"id":172,"date":"2019-12-04T23:32:47","date_gmt":"2019-12-05T04:32:47","guid":{"rendered":"http:\/\/qlikwithfriends.com\/?p=172"},"modified":"2019-12-04T23:35:53","modified_gmt":"2019-12-05T04:35:53","slug":"help-text-popup-extension-add-html-help-text-to-your-application","status":"publish","type":"post","link":"https:\/\/qlikwithfriends.com\/index.php\/2019\/12\/04\/help-text-popup-extension-add-html-help-text-to-your-application\/","title":{"rendered":"Help Text Popup Extension &#8212; Add HTML Help Text To Your Application"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"172\" class=\"elementor elementor-172\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c4464ee elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c4464ee\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8e857a9\" data-id=\"8e857a9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ef5f3d4 elementor-widget elementor-widget-text-editor\" data-id=\"ef5f3d4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>I\u2019ve just uploaded a new extension to Qlik Branch that I\u2019d like to tell you about.<\/p><p>The visualizations on most Qlik Sense pages are usually self-explanatory. Sometimes, one even the most well-designed sheets, you\u2019ll have complex visualizations that do require explanation or possibly even a little training.<\/p><p>The Help Text Popup extension is a simple, non-obtrusive visualization that enables you to provide the user with a page of HTML help text. It appears as a question mark icon that you can place anywhere on the sheet. You can even size it as small as one grid box.<\/p><p>When the use clicks the question mark, it pops up a box containing your help text. The box overlays as much or as little of the page as desired and can be modal or non-modal.<\/p><p>After the user dismisses the help text, the entire original sheet is viewable.<\/p><p>Here\u2019s an example in which I\u2019ve added the popup to a sheet in the Human Capital Management sample app from the Qlik.com site.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dec7009 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dec7009\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-db8b98f\" data-id=\"db8b98f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7891eaf elementor-widget elementor-widget-image\" data-id=\"7891eaf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"432\" src=\"https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Sample-Screen-1024x446.png\" class=\"attachment-large size-large wp-image-174\" alt=\"Sample Screen\" srcset=\"https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Sample-Screen-1024x446.png 1024w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Sample-Screen-300x131.png 300w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Sample-Screen-768x335.png 768w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Sample-Screen-459x200.png 459w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4fe7b6c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4fe7b6c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ccf6236\" data-id=\"ccf6236\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e4083b elementor-widget elementor-widget-text-editor\" data-id=\"5e4083b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The icon is the small question mark that I\u2019ve placed in the top left corner.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9c717d9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9c717d9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7c11c8e\" data-id=\"7c11c8e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e0c3cc0 elementor-widget elementor-widget-image\" data-id=\"e0c3cc0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"257\" src=\"https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-Simple-Icon-300x257.png\" class=\"attachment-medium size-medium wp-image-176\" alt=\"\" srcset=\"https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-Simple-Icon-300x257.png 300w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-Simple-Icon-768x657.png 768w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-Simple-Icon-234x200.png 234w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-Simple-Icon.png 945w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ee7a1e6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ee7a1e6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6295d59\" data-id=\"6295d59\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3b606f6 elementor-widget elementor-widget-text-editor\" data-id=\"3b606f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The image below shows the same sheet after the icon has been clicked.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34384a8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"34384a8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9df5dfc\" data-id=\"9df5dfc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8d82ae4 elementor-widget elementor-widget-image\" data-id=\"8d82ae4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"436\" src=\"https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-1024x450.png\" class=\"attachment-large size-large wp-image-173\" alt=\"Sample Popup\" srcset=\"https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-1024x450.png 1024w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-300x132.png 300w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-768x338.png 768w, https:\/\/qlikwithfriends.com\/wp-content\/uploads\/2019\/12\/Help-Text-Popup-455x200.png 455w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cbf09ac elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cbf09ac\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3593a2a\" data-id=\"3593a2a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-26c70bb elementor-widget elementor-widget-text-editor\" data-id=\"26c70bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The extension lets you customize many of its properties. I\u2019ve listed these below:<\/p><p><u>Help Icon Options<\/u><\/p><ul><li>Color &#8211; The icon color can be set to any valid color expression.<\/li><li>Size &#8211; The icon is normally displayed as 16px (default). It can also be changed to small (12px) or large (20px).<\/li><\/ul><p><u>Help Box Options<\/u><\/p><ul><li>Show box title &#8211; The help box title can be toggled on and off.<\/li><li>Help Box Title &#8211; The help box can have a custom title.<\/li><li>Width &#8211; The width of the box can be sized to any percent of the browser window.<\/li><li>Height &#8211; The height of the box can be sized to any percent of the browser window.<\/li><li>HTML Text &#8211; The actual help text is any valid HTML that can be rendered.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-51d3ab4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"51d3ab4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d72af2e\" data-id=\"d72af2e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-78b389f elementor-widget elementor-widget-html\" data-id=\"78b389f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<a href=\"https:\/\/developer.qlik.com\/garden\/5ddcd57cf62b220018fd28dc\">\r\nHere is a link to the web page on Qlik Branch.<\/a>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-37d4e42 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"37d4e42\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-86461e2\" data-id=\"86461e2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-765e778 elementor-widget elementor-widget-text-editor\" data-id=\"765e778\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>I\u2019ll be making enhancements to this in the near future. I\u2019m already testing a version that implements HTML cleansing to prevent cross-site scripting. I also plan to experiment with a WYSIWYG HTML editor. If you\u2019ve got any ideas just let me know in the comments below.<\/p><p>Download the extension and try it out in your Qlik Sense app. Let me know how you\u2019ve used it.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>I\u2019ve just uploaded a new extension to Qlik Branch that I\u2019d like to tell you about. The visualizations on most Qlik Sense pages are usually self-explanatory. Sometimes, one even the most well-designed sheets, you\u2019ll have complex visualizations that do require explanation or possibly even a little training. The Help Text &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[12,6,7],"tags":[],"class_list":["post-172","post","type-post","status-publish","format-standard","hentry","category-extensions","category-qliksense","category-visualizations"],"_links":{"self":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/comments?post=172"}],"version-history":[{"count":6,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/172\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/172\/revisions\/183"}],"wp:attachment":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/media?parent=172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/categories?post=172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/tags?post=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}