• Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy
Averta Support Center
  • Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy

Looking for the answer

Adding Hotspot Layer


Hotspot layer adds a small area over the slider. This small area shows a tooltip when the mouse cursor moves over the point. You can use hotspot layers to add additional info related to some specific areas of the slide image or a layer on the slide. For example, you can attach info for every part of a product over the slide.

Below example shows how to create a hotspot layer. Like other layer types, you need to specify the layer by ms-layer class name and set its type by data-type="hotspot" attribute.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer" data-type="hotspot">
				<!-- tooltip content -->
		        <h3>LOREM IPSUM DOLOR</h3>
		        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
		        <!-- end of tooltip content -->
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Layer attributes

Hotspot layer has some data attributes to control the appearance of the hotspot point and the tooltip.

  • data-align – Specifies the alignment of the tooltip. Its default value is "top".
  • data-width – Specifies the width of the tooltip container in pixels.
  • data-transparent – Hides the hotspot point (data-transparent="true").
  • data-stay-hover – Sets the tooltip stays until mouse cursor is over it (data-stay-hover="true"). This option is disabled by default.
  • data-tooltip-class – Adds class name(s) to the tooltip container.

Set custom point

If you need to add a custom point as the hotspot, you can add it directly inside the hotspot layer and specify it as the hotspot point by ms-hotspot-point class name like the example below:

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer" data-type="hotspot">
				<!-- tooltip content -->
		        <h3>LOREM IPSUM DOLOR</h3>
		        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
		        <!-- end of tooltip content -->
		        <img src=".../path/to/custom-hotspot-point.jpg" alt="" class="ms-hotspot-point">
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

This article only describes how to create the layer. I you need more information about layers, check out following articles:

  • Positioning layers
  • Animating layers
  • Masking layers
  • Layer parallax effect
  • Linking layer

Was this information helpful?

Submit
Wizard Home
Related articles list
Create New Support Ticket
Copyright © 2017 Averta. All rights reserved.