Resize jsPanel.tooltip

[ASX9]

Hi, for a project I need to show a tooltip. I have managed to implement it with jsPanel but when I resize the window the tooltip doesn't update its size even if I indicate it in callback. The tooltips not displayed before resizing are created properly. I tried to use the "remove" method but it doesn't work, can you tell me how to get the correct behaviour?

[Flyer53]

@AlexSG92
I'm not sure whether I understand your intentions/question.
However, there is no feature implemented that automatically resizes and/or repositions a tooltip. To be frank, I don't know why this should be needed. And the regular options dragit and resizeit are turned off anyhow for a tooltip.
Normally a tooltip is a pretty short lived thing displaying some info that doesn't change. In addition a resizing of a tooltip would also require to reposition it in a lot of cases.

Well, maybe you can explain the usecase of your tooltip and your expected behaviour in more detail.

[ASX9]

I apologize if I have not explained myself correctly. I am developing a supervision system (SCADA) that has a multitude of elements (pumps, valves, etc) the idea is that when you position yourself on each of these elements a tooltip appears with various controls and states of that element. I have already created this tooltip and it works perfectly. My problem is that the screen can be resized and the tooltips created before resizing are shown with an inadequate size, while the others are shown correctly.

The only thing I need is that when resizing the window, to kill all the "eventListeners" of "jstooltip" and create them again so that they are displayed with the correct size.

[ASX9]

This is the error I get when I try to use "jspanel.tooltip.remove":

So far, I've managed to get by with forcing the page to reload when the window is resized.

[Flyer53]

Can you please post the complete config for the tooltip? Would help a lot I guess!

However, if you make the tooltip sticky it should close when you click the document somewhere outside the tooltip itself. Or, why don't you leave the header in place? Then you have a close button as well to close the tooltip.

Note:
The mehod jsPanel.tooltip.remove() expects all three arguments to be set in order to know what to remove. And then it does not remove the tooltip itself but removes the event listener from the element triggering the tooltip. In other words: when the mehod jsPanel.tooltip.remove() is called sucessfully the specified tooltip will not be created anymore.

Info:
If you still need to close all tooltips programatically you can use

jsPanel.getPanels(function() {
    return this.classList.contains('jsPanel-tooltip');
}).forEach(function(panel){
  panel.close();
});

on a window resize event for example.

[ASX9]

Here is the config:

jsPanel.tooltip.create({
  ttipName: myname,
  ttipEvent: 'mouseover',
  connector: true,
  container: mycontainer,
  target: '#' + myid,
  mode: 'semisticky',
  position: {my:'center-bottom', at:'center-top'},
  delay: 700,
  theme: 'light',
  borderRadius: '.5rem',
  contentSize: {
    width: '40%',
    height: '50%'
  },
  header: false,
  opacity: 0,
  contentAjax: {
    url: myurl,
    done: (xhr, panel) => {
      panel.content.innerHTML = xhr.responseText;
      var indice_elemento = this.dataJSON.devices.findIndex(item => item.id === myid);
      if (indice_elemento > 0){
        this.mapTooltip(indice_elemento);
      }
      else{
        this.mapTooltip(0);
      }
      }
  },
  callback: (panel) => {
    var e = document.querySelectorAll('.jsPanel');
    if (e.length > 1){
      e[0].parentNode.removeChild(e[0]);
    }
    if (panel.overlaps('window').right < 0){
      jsPanel.tooltip.reposition(panel, {my:'right-bottom', at:'left-center'}, (tip) => {
        tip.style.opacity = 1;
      });
    }
    else if (panel.overlaps('window').left < 0){
      jsPanel.tooltip.reposition(panel, {my:'left-bottom', at:'right-center'}, (tip) => {
        tip.style.opacity = 1;
      });
    }
    else if (panel.overlaps('window').top < 0){
      jsPanel.tooltip.reposition(panel, {my:'center-top', at:'center-bottom'}, (tip) => {
        tip.style.opacity = 1;
      });
    }
    else {
      panel.style.opacity = 1;
    }
  }
});

As I said before, the problem is not closing the pane, the problem is that the panes opened before resizing the window, when reopened have inadequate dimensions. So, I intend to delete all the listeners and create them again to avoid reloading the page when resizing.

[Flyer53]

Whenever a tooltip is shown it's created again from scratch. so removing the event listener won't change anything.

So if the dimensions of the tooltip upon opening it again, after a window resize, are the problem I would assume the setting of option.contentSize is faulty. To verify that please check the follwing. You define the size of the tooltip with

contentSize: {
    width: '40%',
    height: '50%'
  }

and set option.container to container: mycontainer. I assume that mycontainer does not refer to the browser window.

The dimensions of your tooltip defined with option.contentSize are relative to the containing element which is mycontainer, not the browser window. So if mycontainer does not change its dimensions upon a window resize the tooltip dimensions won't change.

If my thinking, which assumes you want the tooltip size to be relative to the broswer window, is correct I would suggest two possible options:
Either remove option.container. In this case the tooltip would be appended to the document element and its dimensions would be set relative to the browser window.
Or explicitely set option.contentSize with values refering to the window dimensions like

contentSize: {
    width: () => { return window.innerWidth * 0.4); },
    height: () => { return window.innerHeight * 0.5); }
  }

If all that doesn't help I fear I still don't understand your issue. In this case we might have to set up a working example page to clear things up ...

[ASX9]

Thank you for your help. Finally, I have found a way to make it work. The key was to force resizing with "panel.resize" when displaying the panel. This is the final code:

jsPanel.tooltip.create({
			ttipName: myname,
			ttipEvent: 'mouseover',
			connector: true,
			target: '#' + myid,
			mode: 'semisticky',
			position: {my:'center-bottom', at:'center-top'},
			delay: 700,
			theme: 'light',
			borderRadius: '.5rem',
			panelSize: {
				width: () => { return (window.innerWidth * 0.4); },
				height: () => { return (window.innerHeight * 0.5); }
			  },
			header: false,
			opacity: 0,
			contentAjax: {
				url: myurl,
				done: (xhr, panel) => {
					panel.content.innerHTML = xhr.responseText;
					
					// Map data 
					var element_index = this.dataJSON.devices.findIndex(item => item.id === myid);
					if (element_index > 0){
						this.mapTooltip(element_index);
					}
					else{
						this.mapTooltip(0);
					}
					
				}
			},
			callback: (panel) => {
				
				// Resize the panel
				panel.resize({
					width:  () => { return (window.innerWidth * 0.4);},
					height: () => { return (window.innerHeight * 0.5); }
				}).reposition();

				var e = document.querySelectorAll('.jsPanel');
				
				// Close previous tooltip
				if (e.length > 1){
					e[0].parentNode.removeChild(e[0]);
				}
				
				// Reposition & Show the panel
				if (panel.overlaps('window').right < 10){
					jsPanel.tooltip.reposition(panel, {my:'right-bottom', at:'left-center'}, (tip) => {
						tip.style.opacity = 1;
					});
				}
				else if (panel.overlaps('window').left < 10){
					jsPanel.tooltip.reposition(panel, {my:'left-bottom', at:'right-center'}, (tip) => {
						tip.style.opacity = 1;
					});
				}
				else if (panel.overlaps('window').top < 10){
					jsPanel.tooltip.reposition(panel, {my:'center-top', at:'center-bottom'}, (tip) => {
						tip.style.opacity = 1;
					});
				}
	
				else {
					
					jsPanel.tooltip.reposition(panel, {my:'center-bottom', at:'center-top'}, (tip) => {
						tip.style.opacity = 1;
					});
				}
				
			}
		});

[Flyer53]

👍 Well, if you're happy with the solution then I'm happy too.
I just would suggest to change the line var e = document.querySelectorAll('.jsPanel'); to
var e = document.querySelectorAll('.jsPanel-tooltip'); in order to get a NodeList with tooltips only.
It won't make a difference as long as you use tooltips only. But as soon as you make use of any other type of panel as well it would be in the NodeList as well using the current line of code.