{"id":3945,"date":"2020-04-11T19:04:54","date_gmt":"2020-04-11T19:04:54","guid":{"rendered":"http:\/\/wordpress.creativegigs.net\/docly\/docs\/rogan-wordpress-theme-documentation\/elements\/image-lightbox\/"},"modified":"2026-01-11T23:37:21","modified_gmt":"2026-01-11T15:37:21","slug":"image-hotspots","status":"publish","type":"docs","link":"https:\/\/team.taiwan-family.com\/index.php\/docs\/docly-documentation\/elements\/image-hotspots\/","title":{"rendered":"Image Hotspots Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3945\" class=\"elementor elementor-3945\" data-elementor-post-type=\"docs\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1a2b075a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1a2b075a\" 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-6424d601\" data-id=\"6424d601\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-21381e7f elementor-widget elementor-widget-text-editor\" data-id=\"21381e7f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<p class=\"wp-block-paragraph\">A Dashboard is a convenient way to get an overview of the the current status of your tasks and monitorthe progress of your team.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\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-3caaa20 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3caaa20\" 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-f555eb1\" data-id=\"f555eb1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49cc1a9 elementor-widget elementor-widget-docy-image-hotspots\" data-id=\"49cc1a9\" data-element_type=\"widget\" data-widget_type=\"docy-image-hotspots.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t            <div class=\"pointing_img_container pointing_img_two\">\n                <img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/team.taiwan-family.com\/wp-content\/uploads\/2021\/10\/wallpaperflare.com_wallpaper-1.jpg\" class=\"attachment-full size-full\" alt=\"\" \/>                                    <div class=\"img_pointing  elementor-repeater-item-6385bfc tooltips\"\n                         data-tooltip-content=\"#tooltip-6385bfc\">\n                        <div class=\"dot\"><\/div>\n                    <\/div>\n                                    <div class=\"img_pointing one elementor-repeater-item-d99f50f tooltips\"\n                         data-tooltip-content=\"#tooltip-d99f50f\">\n                        <div class=\"dot\"><\/div>\n                    <\/div>\n                            <\/div>\n                        <div class=\"tooltip_templates d-none\">\n                    <div id=\"tooltip-6385bfc\">\n                        <div class=\"img_pointing_content\">\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                <div class=\"tooltip_templates d-none\">\n                    <div id=\"tooltip-d99f50f\">\n                        <div class=\"img_pointing_content\">\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                        <script>\n            (function ($) {\n                $(document).ready(function () {\n                    \/*--------------- tooltip js --------*\/\n                    function tooltip() {\n                        if ($('.tooltips').length) {\n                            $('.tooltips').tooltipster({\n                                interactive: true,\n                                arrow: true,\n                                animation: 'grow',\n                                delay: 200,\n                            });\n                        }\n                    }\n\n                    tooltip();\n                    $('.tooltips_one').data('tooltip-custom-class', 'tooltip_blue').tooltip();\n                    $('.tooltips_two').data('tooltip-custom-class', 'tooltip_danger').tooltip();\n\n                    \/*--------------- Modal close on icon click --------*\/\n                    $('.icon_close').on('click', function () {\n                        $('.img_modal').modal('hide');\n                    });\n                });\n            })(jQuery);\n\n        <\/script>\n        \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<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8c0d9ec elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8c0d9ec\" 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-bde1b36\" data-id=\"bde1b36\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-714baa8 elementor-widget elementor-widget-heading\" data-id=\"714baa8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Hotspots in lightbox modal<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8324e6a elementor-widget elementor-widget-docy-image-hotspots\" data-id=\"8324e6a\" data-element_type=\"widget\" data-widget_type=\"docy-image-hotspots.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t                <div class=\"pointing_img\">\n                    <a href=\"#\" data-bs-toggle=\"modal\"\n                       data-bs-target=\"#exampleModal-8324e6a\">\n                        <img decoding=\"async\" width=\"1920\" height=\"1280\" src=\"https:\/\/team.taiwan-family.com\/wp-content\/uploads\/2021\/12\/luca-bravo-XJXWbfSo2f0-unsplash-1-1.jpg\" class=\"attachment-full size-full\" alt=\"\" \/>                    <\/a>\n                <\/div>\n                        <div class=\"modal fade img_modal\" id=\"exampleModal-8324e6a\" tabindex=\"-2\"\n                 role=\"dialog\" aria-hidden=\"false\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                    <i class=\"icon_close\"><\/i>\n                <\/button>\n                <div class=\"modal-dialog pointing_img_container\" role=\"document\">\n                    <div class=\"modal-content\">\n                        <img decoding=\"async\" width=\"1920\" height=\"1280\" src=\"https:\/\/team.taiwan-family.com\/wp-content\/uploads\/2021\/12\/luca-bravo-XJXWbfSo2f0-unsplash-1-1.jpg\" class=\"attachment-full size-full\" alt=\"\" \/>                                <div class=\"img_pointing tooltips  elementor-repeater-item-6385bfc\"\n                                     data-tooltip-content=\"#tooltip-6385bfc\">\n                                    <div class=\"dot\"><\/div>\n                                <\/div>\n                                                                <div class=\"img_pointing tooltips one elementor-repeater-item-d99f50f\"\n                                     data-tooltip-content=\"#tooltip-d99f50f\">\n                                    <div class=\"dot\"><\/div>\n                                <\/div>\n                                                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"tooltip_templates d-none\">\n                    <div id=\"tooltip-6385bfc\">\n                        <div class=\"img_pointing_content\">\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                <div class=\"tooltip_templates d-none\">\n                    <div id=\"tooltip-d99f50f\">\n                        <div class=\"img_pointing_content\">\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                        <script>\n            (function ($) {\n                $(document).ready(function () {\n                    \/*--------------- tooltip js --------*\/\n                    function tooltip() {\n                        if ($('.tooltips').length) {\n                            $('.tooltips').tooltipster({\n                                interactive: true,\n                                arrow: true,\n                                animation: 'grow',\n                                delay: 200,\n                            });\n                        }\n                    }\n\n                    tooltip();\n                    $('.tooltips_one').data('tooltip-custom-class', 'tooltip_blue').tooltip();\n                    $('.tooltips_two').data('tooltip-custom-class', 'tooltip_danger').tooltip();\n\n                    \/*--------------- Modal close on icon click --------*\/\n                    $('.icon_close').on('click', function () {\n                        $('.img_modal').modal('hide');\n                    });\n                });\n            })(jQuery);\n\n        <\/script>\n        \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<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>A Dashboard is a convenient way to get an overview of t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2744,"menu_order":5,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[70,91,105,131],"class_list":["post-3945","docs","type-docs","status-publish","hentry","doc_tag-doc","doc_tag-image","doc_tag-new","doc_tag-tag","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/docs\/3945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/comments?post=3945"}],"version-history":[{"count":1,"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/docs\/3945\/revisions"}],"predecessor-version":[{"id":14693,"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/docs\/3945\/revisions\/14693"}],"up":[{"embeddable":true,"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/docs\/2744"}],"wp:attachment":[{"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/media?parent=3945"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/team.taiwan-family.com\/index.php\/wp-json\/wp\/v2\/doc_tag?post=3945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}