You Think ATOMZEN is COOL?

BUY IT NOW here on DimeSale!
Menu

HotSpot

[cq_vc_hotspot image=”3149″ position=”48.049619437939114%|25.357666015625004%,35.45264929742389%|16.884765625%,45.451551522248245%|48.8525390625%,67.33935889929742%|63.9013671875%,64.28571428571429%|27.578124999999996%,” iconbackground=”rgba(30,115,190,0.5)” arrowposition=”right,top, top, bottom” opacity=”0.9″ tooltipstyle=”shadow” trigger=”hover” tooltipanimation=”grow” custom_links_target=”_self” maxwidth=”320″ color=”#00BFFF,#9370DB,#9ACD32″ circlecolor=”#f2f2f2″ ispulse=”yes” pulsecolor=”pulse-white” marginoffset=”-6px 0 0 -6px” icontype=”icon” fonticon=”fa-heart,fa-youtube,fa-book,fa-comment,fa-umbrella”]

You have to wrap each tooltip block in hotspotitem.
You can put anything in it, like a image, video or other shortcode.

Hello tooltip 2, you can customize the icon color, link, arrow position, tooltip content etc in the backend.

I’m the book
You can drag the hotspot icon to update it’s position in the frontend editor now.
Visit my profile for more works.
The image is in 100% full width.

[/cq_vc_hotspot]

Update in version 3.2 (Nov 26 2014): Hotspot icon can be in Font Awesome icon, number or simple dot.

Update in version 3.1: Now you can drag the hotspot icon to update it’s position in the Visual Composer’s frontend editor. See a Youtube video demo.

[cq_vc_hotspot image=”3153″ width=”720″ position=”22.66599127182045%|50.280373831775705%,61.85707605985037%|55.794392523364486%,39.40149625935162%|23.551401869158877%,” iconbackground=”rgba(221,51,51,0.5)” arrowposition=”top,top,left, bottom” opacity=”1″ tooltipstyle=”light” trigger=”hover” tooltipanimation=”swing” custom_links_target=”_self” maxwidth=”320″ circlecolor=”#ffffff” ispulse=”yes” pulsecolor=”pulse-white” icontype=”icon” fonticon=”fa-map-marker,fa-map-marker,fa-coffee,fa-comment” color=”#663399″][hotspotitem]Hello tooltip, you can customize the icon color, link, arrow position, tooltip content etc in the backend.[/hotspotitem]
[hotspotitem]

tumblr_n98s39IFd01qfirfao1_1280

Support image, video and other shortcode. You can customize the icon color, link, arrow position, tooltip content etc in the backend.
[/hotspotitem]
[hotspotitem]

Drag to update icon position

You can drag the hotspot icon to update it’s position in the frontend editor now.
Visit my profile for more works.
[/hotspotitem][/cq_vc_hotspot]

Great shot from Timothy J. Reynolds

[cq_vc_hotspot image=”3151″ position=”30.743890274314218%|58.598130841121495%,53.483042394014966%|60%,35.540399002493764%|80.37383177570094%,65.56109725685785%|44.85981308411215%,57.36084788029925%|85.37383177570094%,30.498753117206984%|21.63551401869159%,40.714962593516205%|7.05607476635514%,47.223690773067325%|31.355140186915886%,66.43815461346632%|75.2803738317757%,63.70324189526184%|23.50467289719626%,36.99077306733167%|40.70093457943925%,” iconbackground=”rgba(30,115,190,0.96)” arrowposition=”right, left, top, bottom,,right,left” opacity=”1″ tooltipstyle=”punk” trigger=”hover” tooltipanimation=”slide” custom_links_target=”_self” maxwidth=”320″ circlecolor=”#ffffff” ispulse=”no” pulsecolor=”pulse-white” icontype=”number” fonticon=”fa-hand-o-right,fa-image,fa-coffee,fa-comment”]

You have to wrap each tooltip block in hotspotitem.
You can put anything in it, like a image, video or other shortcode.
Hello tooltip 2, you can customize the icon color, link, arrow position, tooltip content etc in the backend.
Hello tooltip 3
You can drag the hotspot icon to update it’s position in the frontend editor now.
Visit my profile for more works.
Hello tooltip 5
Hello tooltip 6
Hello tooltip 7
Hello tooltip 8
Hello tooltip 9
Hello tooltip 10
Hello tooltip 11

[/cq_vc_hotspot]

Great shot from Timothy J. Reynolds

Hover tooltip, icon link, pulse animation

[cq_vc_hotspot image=”3152″ position=”56.45745056497176%|25.300817757009348%,44.257591807909606%|50.242406542056074%,62.433792372881356%|62.55841121495327%,82%|24%,” iconbackground=”rgba(0,0,0,0.5)” arrowposition=”right,,top,bottom” opacity=”0.4″ tooltipstyle=”noir” trigger=”hover” tooltipanimation=”grow” custom_links_target=”_self” maxwidth=”320″ width=”720″ color=”#00BFFF,,#00BFFF,purple” links=”http://go.atom.deals/atomzen,http://codecanyon.net/item/visual-composer-extensions-all-in-one/7731868?ref=sike” circlecolor=”#ffffff” ispulse=”yes” pulsecolor=”pulse-green” icontype=”icon” fonticon=”fa-image,fa-map-marker,”][hotspotitem]
You have to wrap each tooltip block with hotspotitem. You can put anything in it, like a image, video or other shortcode here.[/hotspotitem]
[hotspotitem]

tumblr_n98s39IFd01qfirfao1_1280

The MacBook here, you can customize the icon color, link, arrow position, tooltip content etc in the backend.
[/hotspotitem]
[hotspotitem]Hello magic mouse[/hotspotitem]
[hotspotitem]

Hello chair

You can drag the hotspot icon to update it’s position in the frontend editor now. Visit my profile for more works.
[/hotspotitem][/cq_vc_hotspot]

Trigger by click, tooltip in punk style

[cq_vc_hotspot image=”3154″ width=”800″ position=”25%|30%,63.32537375415283%|30.625000000000004%,48%|68%,” iconbackground=”rgba(88,46,193,0.88)” opacity=”0.5″ tooltipstyle=”shadow” trigger=”click” tooltipanimation=”grow” custom_links_target=”_self” maxwidth=”330″ arrowposition=”right, left, top, bottom” circlecolor=”#ede436″ ispulse=”no” pulsecolor=”pulse-white” icontype=”number” fonticon=”fa-hand-o-right,fa-image,fa-coffee,fa-comment”][hotspotitem]You can drag the hotspot icon to update it’s position in the frontend editor now.[/hotspotitem]
[hotspotitem]Hello tooltip 2, you can customize the icon color, link, arrow position, tooltip conent etc in the backend.[/hotspotitem]
[hotspotitem]
[/hotspotitem][/cq_vc_hotspot]