How to add tooltip for the opener button

You can add an animated tooltip for the menu opener button like on our Restaurant demo page.


Tooltip-like animation for the opener button

You will only need some custom JS code thus it will be easy to implement on your own site. An image with the Click text is also needed, here you can download it, and copy to your site /images folder. Of course you can use any custom image here. After that open the module manager of the menu, and insert the following code under the Custom JS parameter:

var tl, off = sm.$button.offset();
var $div = $('<img src="/images/click-on-menu.png" alt="Click">').css({
   position: "fixed",
   zIndex: 100000,
   opacity: 0,
   top: off.top - $(window).scrollTop() + 4,
   left: off.left + sm.$button.width() + 8
}).appendTo(document.body);

$(window).on("load", function() {
tl = new TimelineLite();
tl.fromTo($div[0], 1, {x: 200}, {css:{x: 0, opacity: 1}, ease: Bounce.easeOut}, 0.5);
tl.to($div[0], .5, {css:{opacity:0}}, 3);
});

After you pasted the code snippet save the module, check the tooltip animation on your frontend.