{"id":283,"date":"2018-12-07T04:48:32","date_gmt":"2018-12-07T04:48:32","guid":{"rendered":"http:\/\/stopdesign.cn\/vc\/?page_id=283"},"modified":"2018-12-07T05:42:07","modified_gmt":"2018-12-07T05:42:07","slug":"image-hotspot-with-tooltip","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/vc\/image-hotspot-with-tooltip\/","title":{"rendered":"Image Hotspot with Tooltip"},"content":{"rendered":"<div class=\"vce-row-container\"><div class=\"vce-row vce-row--col-gap-30 vce-row-columns--top vce-row-content--top\" id=\"el-3ba041e9\" data-vce-do-apply=\"all el-3ba041e9\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-66-66p vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-a0579482\" data-vce-do-apply=\"background border el-a0579482\"><div class=\"vce-col-inner\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding margin  el-a0579482\"><div id=\"el-fd49600c\" class=\"cqtooltip-wrapper cq-hotspots-32\" data-maxwidth=\"\" data-marginoffset=\"\" data-tooltipanimation=\"grow\" data-tooltipstyle=\"shadow\" data-vce-do-apply=\"all el-fd49600c\"><img src=\"http:\/\/stopdesign.cn\/vc\/wp-content\/plugins\/vc-addons-sike\/elements\/cqHotSpot\/cqHotSpot\/public\/sample.jpg\" alt=\"sample image\"><div class=\"cq-hotspots\"><div class=\"hotspot-item pulse-white\" style=\"top: 50%; left: 77%;\"><a class=\"cq-tooltip lavender tooltipstered\" href=\"#\" data-arrowposition=\"top\"><div class=\"cq-tooltip-content\">Hello tooltip 1<\/div><i class=\"cq-hotspot-icon fa fa-coffee\"><\/i><\/a><\/div><div class=\"hotspot-item\" style=\"top: 43%; left: 42%;\"><a class=\"cq-tooltip grapefruit tooltipstered\" href=\"#\" data-arrowposition=\"top\"><div class=\"cq-tooltip-content\"><p><iframe src=\"https:\/\/www.youtube.com\/embed\/1zE2pWg01-8\" width=\"500\" height=\"300\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p><\/div><i class=\"cq-hotspot-icon fa fa-youtube-square\"><\/i><\/a><\/div><div class=\"hotspot-item\" style=\"top: 24%; left: 74%;\"><a class=\"cq-tooltip aqua tooltipstered\" href=\"#\" data-arrowposition=\"top\"><div class=\"cq-tooltip-content\">Yet another tooltip<\/div><i class=\"cq-hotspot-icon fa fa-twitter\"><\/i><\/a><\/div><div class=\"hotspot-item pulse-yellow\" style=\"top: 65%; left: 10%;\"><a class=\"cq-tooltip sunflower tooltipstered\" href=\"#\" data-arrowposition=\"top\" data-trigger=\"click\" data-isopen=\"true\"><div class=\"cq-tooltip-content\"><p>This is the pen. Hello pen.<\/p><\/div><i class=\"cq-hotspot-icon vcv-ui-icon-material vcv-ui-icon-material-mode_edit\"><\/i><\/a><\/div><\/div><\/div><\/div><\/div><div class=\"vce-col vce-col--md-33-34p vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last\" id=\"el-04145705\" data-vce-do-apply=\"background border el-04145705\"><div class=\"vce-col-inner\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding margin  el-04145705\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-410acd1e\" data-vce-do-apply=\"all el-410acd1e\"><h2>Hotspot support Icon, Number or a Single Dot<\/h2>\n<ol>\n\t<li>Built-in color with custom color design.<\/li>\n<li>Optional pulse border animation.\n<\/li>\n<li>\nOptional icon size.\n<\/li>\n<li>Responsive, display properly in small screen.\n<\/li>\n<li>Tooltip support rich content, like YoutTube, Vimeo video or image etc.<\/li>\n<li>And much more features...<\/li>\n<ol>\n<\/ol><\/ol><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\"><div class=\"vce-row vce-row--col-gap-30 vce-row-columns--top vce-row-content--top\" id=\"el-c86241ad\" data-vce-do-apply=\"all el-c86241ad\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-100p vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-9b8faf43\" data-vce-do-apply=\"background border el-9b8faf43\"><div class=\"vce-content-background-container\"><\/div><div class=\"vce-col-inner\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding margin  el-9b8faf43\"><div id=\"el-b1293af7\" class=\"cqtooltip-wrapper cq-hotspots-32\" data-maxwidth=\"\" data-marginoffset=\"\" data-tooltipanimation=\"fade\" data-tooltipstyle=\"punk\" data-vce-do-apply=\"all el-b1293af7\"><img src=\"https:\/\/stopdesign.cn\/vc\/wp-content\/uploads\/2018\/11\/gades-photography-761358-unsplash.jpg\" alt=\"\"><div class=\"cq-hotspots\"><div class=\"hotspot-item pulse-white\" style=\"top: 53%; left: 75%;\"><a class=\"cq-tooltip lavender tooltipstered\" href=\"#\" data-arrowposition=\"top\"><div class=\"cq-tooltip-content\"><p>Turn on the light.<\/p><\/div><i class=\"cq-hotspot-icon\">1<\/i><\/a><\/div><div class=\"hotspot-item\" style=\"top: 39%; left: 51%;\"><a class=\"cq-tooltip white tooltipstered\" href=\"#\" data-arrowposition=\"top\"><div class=\"cq-tooltip-content\">What's the time?&nbsp;<br><br>\n<img class=\"alignnone size-medium wp-image-254\" src=\"https:\/\/stopdesign.cn\/vc\/wp-content\/uploads\/2018\/11\/ales-nesetril-734016-unsplash-1-300x213.jpg\" alt=\"\" width=\"300\" height=\"213\"><\/div><i class=\"cq-hotspot-icon\">2<\/i><\/a><\/div><div class=\"hotspot-item\" style=\"top: 81%; left: 27%;\"><a class=\"cq-tooltip aqua tooltipstered\" href=\"#\" data-arrowposition=\"top\"><div class=\"cq-tooltip-content\">Yet another tooltip<\/div><i class=\"cq-hotspot-icon\">3<\/i><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\"><div class=\"vce-row vce-row--col-gap-30 vce-row-columns--top vce-row-content--top\" id=\"el-6a8beb4a\" data-vce-do-apply=\"all el-6a8beb4a\"><div class=\"vce-content-background-container\"><\/div><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-43e6d7a8\" data-vce-do-apply=\"background border el-43e6d7a8\"><div class=\"vce-col-inner\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding margin  el-43e6d7a8\"><div id=\"el-218adf77\" class=\"cqtooltip-wrapper cq-hotspots-48\" data-maxwidth=\"\" data-marginoffset=\"\" data-tooltipanimation=\"fade\" data-tooltipstyle=\"noir\" data-vce-do-apply=\"all el-218adf77\"><img src=\"https:\/\/stopdesign.cn\/vc\/wp-content\/uploads\/2018\/11\/gades-photography-761358-unsplash.jpg\" alt=\"\"><div class=\"cq-hotspots\"><div class=\"hotspot-item pulse-red\" style=\"top: 50%; left: 75%;\"><a class=\"cq-tooltip lightgray tooltipstered\" href=\"#\" data-arrowposition=\"top\" style=\"background-color: rgba(114, 105, 105, 0.54);\"><div class=\"cq-tooltip-content\"><p>Turn on the light.<\/p><\/div><span class=\"cq-tooltip-dot\"><\/span><\/a><\/div><div class=\"hotspot-item pulse-white\" style=\"top: 38%; left: 51%;\"><a class=\"cq-tooltip white tooltipstered\" href=\"#\" data-arrowposition=\"top\" data-isopen=\"false\" style=\"background-color: rgba(255, 255, 255, 0.63);\"><div class=\"cq-tooltip-content\">What's the time?&nbsp;<br><br>\n<img class=\"alignnone size-medium wp-image-254\" src=\"https:\/\/stopdesign.cn\/vc\/wp-content\/uploads\/2018\/11\/ales-nesetril-734016-unsplash-1-300x213.jpg\" alt=\"\" width=\"300\" height=\"213\"><\/div><span class=\"cq-tooltip-dot\"><\/span><\/a><\/div><div class=\"hotspot-item\" style=\"top: 81%; left: 27%;\"><a class=\"cq-tooltip aqua tooltipstered\" href=\"#\" data-arrowposition=\"top\" data-isopen=\"true\"><div class=\"cq-tooltip-content\">Yet another tooltip<\/div><span class=\"cq-tooltip-dot\"><\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hello tooltip 1Yet another tooltipThis is the pen. Hello pen.Hotspot support Icon, Number or a Single Dot Built-in color with custom color design. Optional pulse border animation. Optional icon size. Responsive, display properly in small screen. Tooltip support rich content, like YoutTube, Vimeo video or image etc. And much more features&#8230; Turn on the light.1What&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/pages\/283"}],"collection":[{"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":26,"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/pages\/283\/revisions"}],"predecessor-version":[{"id":313,"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/pages\/283\/revisions\/313"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/vc\/wp-json\/wp\/v2\/media?parent=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}