I have some colour coded definitions, but there is not space on the slide to include them. I would like to display a tooltip style definition on hovering over a coloured circle.
Here is a screenshot. The IMPORTANT NOTICE and the list below, are outside of the slider.
I would like to be able to show a tooltip of information when hovering over any of the products on the slide, or their associated colour circles. I would like to show the corresponding information from below IMPORTANT NOTICE.
For instance, hovering over NUTRINI LOW ENERGY MULTI FIBRE, or the pink circle below it, will display the information associated with the pink circle in the list below IMPORTANT NOTICE.
What you would like to achieve, that requires JavaScript programming knowledge. We are happy to help you using the slider, but we cannot provide guidance on individual programming. The jQuery version of LayerSlider does not have a function that allows you to change elements outside or inside the slider with a click or with hovering on an element. If you are experienced in programming, you can use custom code, e.g.:
jQuery( 'yourlayer' ).on( 'click', function(){ here comes your code ... });
Yes, solutions like this are very nice and clean. With JS, it would be more complicated. We are planning to add an extended layer actions functionality to a future version of the plugin.
I have some colour coded definitions, but there is not space on the slide to include them. I would like to display a tooltip style definition on hovering over a coloured circle.
Hello Chris,
Could you, please give me more details about this? Can I see your website, or can you show me screenshots?
Best Regards,
George | Kreatura Dev Team
Hi George,
Here is a screenshot. The IMPORTANT NOTICE and the list below, are outside of the slider.
I would like to be able to show a tooltip of information when hovering over any of the products on the slide, or their associated colour circles. I would like to show the corresponding information from below IMPORTANT NOTICE.
For instance, hovering over NUTRINI LOW ENERGY MULTI FIBRE, or the pink circle below it, will display the information associated with the pink circle in the list below IMPORTANT NOTICE.
Hi George - any update?
Hello Chris,
So if I understand well, you would like to show various HTML elements outside of the slider if you are hovering with your mouse on different layers?
Best Regards,
George | Kreatura Dev Team
Hi - no, the content outside the slider is just an example of the kind of content that will feature in the tooltip.
I would like to show a hidden <div> as a tooltip/info-bubble when hovering over an item.
Hi George - this isn't what I was expecting when I paid for extended support!
Hello Chris,
What you would like to achieve, that requires JavaScript programming knowledge. We are happy to help you using the slider, but we cannot provide guidance on individual programming. The jQuery version of LayerSlider does not have a function that allows you to change elements outside or inside the slider with a click or with hovering on an element. If you are experienced in programming, you can use custom code, e.g.:
jQuery( 'yourlayer' ).on( 'click', function(){ here comes your code ... });
but we cannot help you write the specific code.
Best Regards,
George | Kreatura Dev Team
I am a reasonably experienced web developer, but I thought I would check if there was some functionality like this built into the slider already.
Not sure why it took you over 48hrs to tell me you can't help me...
It's really not something that can only be solved with JS!
Here is a CSS only solution for instance - adding some transitions would make it look even better!
https://codepen.io/FlorinPop17/pen/YbrNxZ
Yes, solutions like this are very nice and clean. With JS, it would be more complicated. We are planning to add an extended layer actions functionality to a future version of the plugin.
Best Regards,
George | Kreatura Dev Team