(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › Tooltip Not Closing & Tooltip Customizing !
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Tooltip Not Closing & Tooltip Customizing ! (Read 5311 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Tooltip Not Closing & Tooltip Customizing !
Jul 19th, 2019 at 8:44am
Print Post  
Hi,

I've a tab in my application and diagram is shown in that tab.

I've created a composite node and setting tool tip like this,

compNode.setTooltip("Hi");

When I move the mouse over the node, the toop tip is displayed.

At that time, on right click on the node, I displays a context menu and on clicking on that creates a new tab and select that tab.

In the second tab also the same tool tip is displayed and it is not closed.

To close that, I need to come back to first tab and move the mouse.

May I know why this happens?

Regards,
Kannan
« Last Edit: Jul 30th, 2019 at 12:42pm by Kannan Thirumal »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Tooltip Not Closing !
Reply #1 - Jul 19th, 2019 at 4:00pm
Print Post  
Hi,

The tooltip div is not a child of the diagram's div, so hiding the latter (or whatever your tab control does with it, like changing Z orders) won't remove the tooltip. Try calling diagram.clearTooltip() method to clear it explicitly when changing tabs.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Tooltip Not Closing !
Reply #2 - Jul 22nd, 2019 at 7:18am
Print Post  
Hi,

Thank you Slavcho, with that, we can clear the diagram tooltip on switching tabs or showing context menu. It works !

Also I saw hidden property in the tooltip element. Is this works?

        var tooltip = document.querySelector("div#diagram_tooltip");
        tooltip.hidden = true;

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Tooltip Not Closing !
Reply #3 - Jul 22nd, 2019 at 10:16am
Print Post  
Hi,

Calling diagram.clearTooltip() is the recommended way to handle this case. Modifying the DOM element of the tooltip for that purpose may have undesired side-effects.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Tooltip Not Closing !
Reply #4 - Jul 30th, 2019 at 8:04am
Print Post  
Hi,

     Is there any way to customize the tooltip like changing the background color, font, size etc

Regards,
Kannan
  
Tooltip.png ( 92 KB | 166 Downloads )
Tooltip.png
Custom_Tooltip.png ( 101 KB | 154 Downloads )
Custom_Tooltip.png
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Tooltip Not Closing !
Reply #5 - Jul 30th, 2019 at 10:06am
Print Post  
Hi,

We will add the ability to style tooltips via CSS in the upcoming release, but in the meantime you can override the diagram.onTooltip method and customize the tooltip there. For example:
Code (Javascript)
Select All
var originalOnTooltip = MindFusion.Diagramming.Diagram.prototype.onTooltip;
MindFusion.Diagramming.Diagram.prototype.onTooltip = function()
{
	originalOnTooltip.apply(this, []);

	if (this.tooltipDiv)
	{
		this.tooltipDiv.style.background = "#a0a0a0";

		var tooltipText = document.createElement("span");
		tooltipText.style.font = "bold 12px Verdana, serif";
		tooltipText.style.color = "white";
		tooltipText.style.margin = "5px"
		tooltipText.innerHTML = this.tooltipDiv.innerHTML;
		this.tooltipDiv.innerHTML = null;
		this.tooltipDiv.appendChild(tooltipText);
	}
};


You can also apply CSS style via the tooltip's div id (the default id is the diagram canvas element name + "_tooltip"), but you won't really be able to style the text that way, only the div.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Tooltip Not Closing !
Reply #6 - Jul 30th, 2019 at 12:41pm
Print Post  
Thank you Lyubo. It works ! When the css way of customizing is released, please let me know.
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Tooltip Not Closing & Tooltip Customizing !
Reply #7 - Jul 31st, 2019 at 11:05am
Print Post  
Hi,

Support for CSS styling of the tooltips is added in this new beta build: https://mindfusion.eu/_beta/jsdiag334.zip.

Code (CSS)
Select All
.mf_diagram_tooltip
{
	background: #a0a0a0 !important;
}
.mf_diagram_tooltip span
{
	font: bold 12px Verdana, serif;
	color: white;
	margin: 5px;
}
.mf_nodeList_tooltip
{
	background: #a0a0a0 !important;
}
.mf_nodeList_tooltip span
{
	font: bold 12px Verdana, serif;
	color: white;
	margin: 5px;
}


Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Tooltip Not Closing & Tooltip Customizing !
Reply #8 - Aug 1st, 2019 at 7:09am
Print Post  
Thank you Lyubo  Smiley
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Tooltip Not Closing & Tooltip Customizing !
Reply #9 - Apr 3rd, 2020 at 12:35pm
Print Post  
Hi,

When the node is in the right side of the diagram, then the tooltip is shown in multiple lines (as shown in image-1)

So, I set style to nowrap like below,

tooltipText.style.whiteSpace = "nowrap";

Now the tooltip is shown in single line but it is shown out of diagram and also horizontal scroll bar (chrome browser) shown (as shown in image-2)

May I know how to show the tooltip inside the diagram without scroll bar?

Regards,
Kannan
  
Node_Tooltip_Wrapped.png (Attachment deleted)
Node_Tooltip_NoWrapped.png ( 428 KB | 170 Downloads )
Node_Tooltip_NoWrapped.png
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Tooltip Not Closing !
Reply #10 - Aug 24th, 2021 at 11:33am
Print Post  
Hi,

This tool tip is working fine till the version 3.5.2. From 3.5.3, tool tip is not working. Also for the below code, this.tooltipDiv is undefined. Even after commenting the below code also, tool is not showing.

May I know any changes happened in the recent builds? I couldn't see anything related to tis in the release notes: https://www.npmjs.com/package/diagram-library

Regards,
Kannan

Lyubo wrote on Jul 30th, 2019 at 10:06am:
Hi,

We will add the ability to style tooltips via CSS in the upcoming release, but in the meantime you can override the diagram.onTooltip method and customize the tooltip there. For example:
Code (Javascript)
Select All
var originalOnTooltip = MindFusion.Diagramming.Diagram.prototype.onTooltip;
MindFusion.Diagramming.Diagram.prototype.onTooltip = function()
{
	originalOnTooltip.apply(this, []);

	if (this.tooltipDiv)
	{
		this.tooltipDiv.style.background = "#a0a0a0";

		var tooltipText = document.createElement("span");
		tooltipText.style.font = "bold 12px Verdana, serif";
		tooltipText.style.color = "white";
		tooltipText.style.margin = "5px"
		tooltipText.innerHTML = this.tooltipDiv.innerHTML;
		this.tooltipDiv.innerHTML = null;
		this.tooltipDiv.appendChild(tooltipText);
	}
};


You can also apply CSS style via the tooltip's div id (the default id is the diagram canvas element name + "_tooltip"), but you won't really be able to style the text that way, only the div.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Tooltip Not Closing & Tooltip Customizing !
Reply #11 - Aug 24th, 2021 at 7:16pm
Print Post  
Hi,

We can't find any changes related to tooltips in git commits, and copying that code to the anchor points example seems to work correctly with v3.5.3. Let us know what we should change in Anchors.js code to reproduce.

Code
Select All
...
decb1.setTooltip("check 1");
decb1.setAnchorPattern(decision1In3Out);

var decision2In2Out = MindFusion.Diagramming.AnchorPattern.fromId("Decision2In2Out");

decb2 = diagram.getFactory().createShapeNode(new Rect(70, 30, 30, 20));
decb2.setShape("Decision");
decb2.setText("check 2");
decb2.setTooltip("check 2");
decb2.setAnchorPattern(decision2In2Out);

var originalOnTooltip = MindFusion.Diagramming.Diagram.prototype.onTooltip;
MindFusion.Diagramming.Diagram.prototype.onTooltip = function()
{
	originalOnTooltip.apply(this, []);

	if (this.tooltipDiv)
	{
		this.tooltipDiv.style.background = "#a0a0a0";

		var tooltipText = document.createElement("span");
		tooltipText.style.font = "bold 12px Verdana, serif";
		tooltipText.style.color = "red";
		tooltipText.style.margin = "5px"
		tooltipText.innerHTML = this.tooltipDiv.innerHTML;
		this.tooltipDiv.innerHTML = null;
		this.tooltipDiv.appendChild(tooltipText);
	}
};


Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Tooltip Not Closing & Tooltip Customizing !
Reply #12 - Aug 25th, 2021 at 6:09am
Print Post  
Hi,

Looks like it is working for shape node and not for composite node. Could you please check in my earlier sample code?

https://drive.google.com/file/d/17q1JNEzEi2tqHA2c1PhtD1aGUomBlDyB/view?usp=shari
ng

Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Tooltip Not Closing & Tooltip Customizing !
Reply #13 - Aug 25th, 2021 at 8:05am
Print Post  
Hi,

That seems coming from AnchorPoint.tooltip property in v3.5.4 and a very large anchor point you set for your nodes. Use this as work-around for time being:

Code
Select All
   var originalAnchorPointGetToolTip = MindFusion.Diagramming.AnchorPoint.prototype.getToolTip;
    MindFusion.Diagramming.AnchorPoint.prototype.getToolTip = function()
    {
      var tooltip = originalAnchorPointGetToolTip.call(this);
      if (tooltip == null)
        return "";
      return tooltip;
    };


Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge