[Solved] [Solved] How to make the whole tooltip clickable?

[joeangry]

Hello,

I've been playing with qtip for few days, i searched on the site and on the forum but found nothing about:

how to make the tooltip clickable?


I would like to click anywhere on the tooltip and redirect in a new page (_blank)

Thank you

[Craig]

Use the onRender callback to apply a click event to it

JS Code

$('.selector').qtip({
	api: {
		onRender: function() {
			$(this.elements.tooltip).click(function() {
				window.location = 'http://google.com';
			});
		}
	}
});

[joeangry]

Thank you Craig ^^

[joeangry]

Hello again, i tried since you gave me the api code. And couldn't get it working. So i am turning back to you, again

JS Code

$(document).ready(function() {
 
                $('#qtip').qtip({
                    content:  {
					text: '<b>Garantie :</b>', 
 
		},
					hide: 'unfocus',
                    position: {
					corner: {
					target: 'leftMiddle',
					tooltip: 'rightMiddle'
			}
	},
                    style: {
					background: '#D3000D',
					color: 'black',
					width: { max:'400' },
					tip:{
					corner: 'rightMiddle'
					},
					border: {
					width: 7,
					radius: 5,
					color: '#8f0009'
   },
   }
					api: {
      					onRender: function() {
       					$(this.elements.tooltip).click(function() {
            				window.location = 'http://google.com';
         }
      }
   });
                });
            });
 
        </script>

Thank you

[Craig]

Watch our for trailing commas, and try to keep the code structured with proper indentation, makes it a lot easier to spot mistakes in brackets etc.

JS Code

$(document).ready(function() {
	$('#qtip').qtip({
		content:  {
			text: '<b>Garantie :</b>'
		},
		hide: 'unfocus',
		position: {
			corner: {
				target: 'leftMiddle',
				tooltip: 'rightMiddle'
			}
		},
		style: {
			background: '#D3000D',
			color: 'black',
			width: { max:'400' },
			tip: {
				corner: 'rightMiddle'
			},
			border: {
				width: 7,
				radius: 5,
				color: '#8f0009'
			}
		},
		api: {
			onRender: function() {
				$(this.elements.tooltip).click(function() {
					window.location = 'http://google.com';
				});
			}
		});
	});
});