Posts

Elementor hover tooltip for carousel

Visual composer addict can quit : free wordpress plugin Elementor is out and keeps growing with basic and very efficient widgets, like the carousel that visually beats VC's native. One drawback I encoutered though was the lack of explicit tooltip on image hover that we love to interact when viewing multiple images in a carousel :

elementor-hover-tooltip-illustration

Assembling pieces of code from all over the web, it took me quite a while to get that so I thought I might share. This piece of code is good for experienced wordpress theme developer who knows how to integrate style and javascript, any jquery powered script will accept that one, make sure the carousel you want tooltips has the hovertooltip class because you might not want to apply the effect to all carousels, big full screen might not need that.

javscript hack : creating title attribute from alt, and creating tooltip from title

$(document).ready( function(){
	$('.hovertooltip img').each(  function() {   $(this).attr("title",$(this).attr('alt') ); }); //breizhwave
		//source http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/
		$('.hovertooltip img').hover(function(){
			// Hover over code
			var title = $(this).attr('title');
			$(this).data('tipText', title).removeAttr('title');
			$('<p class="tooltip"></p>')
				.text(title)
				.appendTo('body')
				.show() ;
		}, function() {
			// Hover out code
			$(this).attr('title', $(this).data('tipText'));
			$('.tooltip').remove();
		}).mousemove(function(e) {
			var mousex = e.pageX -250; //Get X coordinates
			var mousey = e.pageY + 10; //Get Y coordinates
			$('.tooltip')
				.css({ top: mousey, left: mousex })
		});
});

styling the tooltip : css

.elementor-image-carousel-wrapper img {cursor:pointer}
.tooltip {
    display:none;
    position:absolute;
    background-color:#c4a85c;
    margin-top:30px;
    border-radius:3px;
    font-size:13px;
    padding:0px 10px 10px 10px;
    width:400px;
    color:#fff;

    z-index:1000;
}