Hotspot
shortcode

Stylish way to present imformation. Hotspot shortcode is a perfect way to show a lot of details on custom image.
Read documentation
Usage frequency
76%
Preset amount
79%
Customizability
93%

Available options

Default code: [dfd_hotspot module_animation="" tooltip_position="" tooltip_width="300"]

Image – Upload the image from the media library;

Tooltip action– Define the action the hotspot tooltip will be displayed on;

Animation – Choose between 14 preset animation effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Marker settings – Specify the marker style, background and decoration background color;

Tooltip settings – Select the tooltip position, content alignment, tooltip min width and backgtound color;

Border style – Allows you to set style, color, radius and width for the border;

Typography – Select letter spacing, font size and element tag. You can also choose the custom font family.

Default style

Sample of preset style without custom changes
Simple style
Hotspot image