{"title":"Adding Hotspot Layer","id":51930,"link":"https:\/\/env.averta.net\/en\/step\/adding-hotspot-layer\/","parent":[51827],"content":"

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.<\/p>\n

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

\t<div id=\"masterslider\" class=\"master-slider\">\r\n\t\t<div class=\"ms-slide\">\r\n\t\t\t<!-- .... -->\r\n\t\t\t<div class=\"ms-layer\" data-type=\"hotspot\">\r\n\t\t\t\t<!-- tooltip content -->\r\n\t\t        <h3>LOREM IPSUM DOLOR<\/h3>\r\n\t\t        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.\r\n\t\t        <!-- end of tooltip content -->\r\n\t\t\t<\/div>\r\n\t\t\t<!-- .... -->\r\n\t\t<\/div>\r\n\t\t<!-- .... -->\r\n\t<\/div><\/pre>\n
Layer attributes<\/h2>\n
Hotspot layer has some data attributes to control the appearance of the hotspot point and the tooltip.<\/p>\n
    \n
  • data-align<\/code> – Specifies the alignment of the tooltip. Its default value is \"top\"<\/code>.<\/li>\n
  • data-width<\/code> – Specifies the width of the tooltip container in pixels.<\/li>\n
  • data-transparent<\/code> – Hides the hotspot point (data-transparent=\"true\"<\/code>).<\/li>\n
  • data-stay-hover<\/code> – Sets the tooltip stays until mouse cursor is over it (data-stay-hover=\"true\"<\/code>). This option is disabled by default.<\/li>\n
  • data-tooltip-class<\/code> – Adds class name(s) to the tooltip container.<\/li>\n<\/ul>\n
    Set custom point<\/h2>\n
    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<\/code> class name like the example below:<\/p>\n
    \t<div id=\"masterslider\" class=\"master-slider\">\r\n\t\t<div class=\"ms-slide\">\r\n\t\t\t<!-- .... -->\r\n\t\t\t<div class=\"ms-layer\" data-type=\"hotspot\">\r\n\t\t\t\t<!-- tooltip content -->\r\n\t\t        <h3>LOREM IPSUM DOLOR<\/h3>\r\n\t\t        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.\r\n\t\t        <!-- end of tooltip content -->\r\n\t\t        <img src=\"...\/path\/to\/custom-hotspot-point.jpg\" alt=\"\" class=\"ms-hotspot-point\">\r\n\t\t\t<\/div>\r\n\t\t\t<!-- .... -->\r\n\t\t<\/div>\r\n\t\t<!-- .... -->\r\n\t<\/div><\/pre>\n
    This article only describes how to create the layer. I you need more information about layers, check out following articles:<\/p>\n