nested tooltip with interactive: true

[Akshay-Hegde]

<strong id="nesting">Hover me!</strong>

$('#nesting').tooltipster({
    content: $('<span>Hover me too!</span>'),
   interactive: true,
    functionReady: function(instance, helper){
        
        // the nested tooltip must be initialized once the first tooltip is open, that's why we do this inside functionReady()
        instance.content().tooltipster({
            content: 'I am a nested tooltip! here is long text I want to copy or read',
          interactive: true,
            distance: 0
        });
    },
    interactive: true
});

One small issue, say both tooltips are interactive, for example inner one contains long text, if you have to copy or to read from inner one, as soon as you move cursor to inner tooltip, it is closing. I hope you got my point.

[louisameline]

Hi, yes I see. But this is not actually a bug in my mind, it's just that you need to fine tune the default behaviour to fit with your use case.

You can obviously fix the situation by using your own mouse event listeners. But I think there's an easier way to do it, it would be to use the dismissable event sent by Tooltipster. You'll have to take a look at the source code but I think you can just prevent the closing from there.

[Akshay-Hegde]

Oh Thank you so much for instant reply finally solved using event.stop(); inside functionReady of inner tooltip.

[louisameline]

Right, this is another simpler way of doing it. Thanks for sharing your tip :)

I've just had a look at the source code and for users who want to go the dismissable event way about this, you need to know that you'll have to trigger this event on the inner tooltip yourself upon the entering and leaving of the outer tooltip. It's a bit more complicated than Akshay-Hegde's solution as it's rather meant for plugin makers to actually prevent the close event of the inner tooltip.

[Akshay-Hegde]

Here is solution example, if anyone also looking for the same.

https://jsfiddle.net/3egfce98/

<input id="dts" type='input' />

$('#dts').tooltipster({
  content: 'Hover me',
  interactive: true,
  functionReady: function(instance, helper) {

    $(helper.tooltip).tooltipster({
      content: 'I am a nested tooltip! here is long text I want to copy or read',
      interactive: true,
      distance: 0,
      position: "right",
      functionReady: function(instance1, helper1) {
        var stop_close = false;
        $(helper1.tooltip).on("mouseenter", function() {
          stop_close = true;
        });
        instance1.on('close', function() {
          stop_close = false;
        });
        instance.on('close', function(event) {
          if (stop_close)
            event.stop();
        });
      }
    });
  },
});

[BQHUY]

Thanks for your code. Please help me ! How to hover child span inside div show child tooltipster.

[input id="dts" type='input' /]

I using
functionBefore: function(instance, helper) {
var $origin = $(helper.origin);
if ($origin.data('loaded') !== true) {

        	$.get('content.php', function(data) {
            	instance.content(data);               
            	$origin.data('loaded', false);
        	});
	return true;
}

}

inside content.php
[div id="content-inside-file"]
[span] id="hover-here">HOVER HERE[/span]
[/div]