Luciano França Posted October 3, 2023 Share Posted October 3, 2023 I have a "TUniTreeView" that I fill based on a "UniMainMenu" and I need a way when creating the Nodes to pass the Hint of the MenuItem.Hint Using this code I can show Hint it doesn't make sense to use "node.data.text" function afterrender(sender, eOpts) { sender.getView().tip = Ext.create('Ext.tip.ToolTip', { target: sender.getView().getEl(), delegate: sender.view.cellSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { gridColums = sender.getView().getGridColumns(); column = gridColums[tip.triggerElement.cellIndex]; record = sender.getView().getRecord(tip.triggerElement.parentNode); // I did tests using it and it is possible to show // record.data.qtip = 'Test qTip'; // record.data.qtitle = 'Test qtitle'; tip.update(record.data.qtip); // Or tip.update(record.data.qtitle); } } }); } Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 4, 2023 Share Posted October 4, 2023 Hello, Please provide a more detailed statement of the task and what needs to be done... Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 4, 2023 Author Share Posted October 4, 2023 3 hours ago, Sherzod said: Hello, Please provide a more detailed statement of the task and what needs to be done... > I have a "TUniTreeView" that I fill based on a "UniMainMenu" and I need a way when creating the Nodes to pass the Hint of the MenuItem.Hint I need to show a Hint in the TreeView that is not "node.data.text" my UniMenuItem has the Hint Property that I will use these Hints are different from the Caption of the UniMenuItem I noticed that UniTreeView has two possibilities that are "record.data.qtip" And "record.data.qtitle" but I don't know how to feed them Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 4, 2023 Share Posted October 4, 2023 If you have a test case, please attach here, I'll try to check it. Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 4, 2023 Author Share Posted October 4, 2023 1 hour ago, Sherzod said: If you have a test case, please attach here, I'll try to check it. Attached Grateful. UniTreeView Hint.7z Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 9 hours ago, Luciano França said: UniTreeView Hint.7z 2.3 kB · 0 downloads One possible solution. 1. Remove this listener: function afterrender(sender, eOpts) { sender.getView().tip = Ext.create('Ext.tip.ToolTip', { target: sender.getView().getEl(), delegate: sender.view.cellSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { gridColums = sender.getView().getGridColumns(); column = gridColums[tip.triggerElement.cellIndex]; record = sender.getView().getRecord(tip.triggerElement.parentNode); // I did tests using it and it is possible to show // record.data.qtip = 'Test qTip'; // record.data.qtitle = 'Test qtitle'; tip.update(record.data.qtip); // Or tip.update(record.data.qtitle); } } }); } 2. Modified code: //node := aTreeview.Items.AddChildObject(aParentNode, anItem.Items[I].Caption, anItem.Items[I]); node := aTreeview.Items.AddChildObject(aParentNode, '<span title="'+ anItem.Items[I].Hint +'">' + anItem.Items[I].Caption + '</span>', anItem.Items[I]); Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 5, 2023 Author Share Posted October 5, 2023 7 hours ago, Sherzod said: One possible solution. 1. Remove this listener: function afterrender(sender, eOpts) { sender.getView().tip = Ext.create('Ext.tip.ToolTip', { target: sender.getView().getEl(), delegate: sender.view.cellSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { gridColums = sender.getView().getGridColumns(); column = gridColums[tip.triggerElement.cellIndex]; record = sender.getView().getRecord(tip.triggerElement.parentNode); // I did tests using it and it is possible to show // record.data.qtip = 'Test qTip'; // record.data.qtitle = 'Test qtitle'; tip.update(record.data.qtip); // Or tip.update(record.data.qtitle); } } }); } 2. Modified code: //node := aTreeview.Items.AddChildObject(aParentNode, anItem.Items[I].Caption, anItem.Items[I]); node := aTreeview.Items.AddChildObject(aParentNode, '<span title="'+ anItem.Items[I].Hint +'">' + anItem.Items[I].Caption + '</span>', anItem.Items[I]); Unfortunately there is the problem that the font size is too small comes back with the same problem that I still don't have a solution for Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 Do you want to use Ext.tip.ToolTip? Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 5, 2023 Author Share Posted October 5, 2023 2 minutes ago, Sherzod said: Do you want to use Ext.tip.ToolTip? Maybe, but for me it doesn't matter, the important thing is the result I need to be able to set the font size Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 FontSize for the tooltip? Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 5, 2023 Author Share Posted October 5, 2023 14 minutes ago, Sherzod said: FontSize for the tooltip? Yes I use this code to display tips for the entire system However, for the "TUniMainMenu" I still haven't been able to increase the font size or control the time function afterrender(sender, eOpts) { sender._tip = Ext.create(''Ext.tip.ToolTip'', { target: sender.getEl(), showDelay:1, dismissDelay:9999, maxHeight: 600, maxWidth: ' + fMaxWidth.Tostring + ', minWidth: 10, html: "<a style=''font-size:15px;''>' + aMsg + '</a>" }); } See that the font size is 15. I have several clients with vision problems who wear glasses and need large fonts, this is a requirement of my clients. and like my system for many Hints, more than 3000 tips in the entire system, some tips being large text Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 Just now, Luciano França said: 13 minutes ago, Sherzod said: FontSize for the tooltip? Yes Ok I will try. Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 5, 2023 Author Share Posted October 5, 2023 2 minutes ago, Sherzod said: Ok I will try. If it's not too much to ask, my friend could try this other question too still no solution and it is very important to me Grateful. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 6, 2023 Share Posted October 6, 2023 13 hours ago, Luciano França said: Yes One possible solution. 1. function afterrender(sender, eOpts) { const createNode = (htmlStr) => { const doc = new DOMParser().parseFromString(htmlStr, 'text/html'); const element = doc.body.children[0]; return element; }; sender.getView().tip = Ext.create('Ext.tip.ToolTip', { target: sender.getView().getEl(), delegate: sender.view.cellSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { var gridColums = sender.getView().getGridColumns(); var column = gridColums[tip.triggerElement.cellIndex]; var record = sender.getView().getRecord(tip.triggerElement.parentNode); var dtitle = createNode(record.getData().text); dtitle = dtitle.getAttribute('data-title'); if (dtitle!="") { tip.update(dtitle); } else { return false } } } }); } 2. node := aTreeview.Items.AddChildObject(aParentNode, '<span data-title="'+ anItem.Items[I].Hint +'">' + anItem.Items[I].Caption + '</span>', anItem.Items[I]); 1 Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 6, 2023 Author Share Posted October 6, 2023 8 hours ago, Sherzod said: One possible solution. 1. function afterrender(sender, eOpts) { const createNode = (htmlStr) => { const doc = new DOMParser().parseFromString(htmlStr, 'text/html'); const element = doc.body.children[0]; return element; }; sender.getView().tip = Ext.create('Ext.tip.ToolTip', { target: sender.getView().getEl(), delegate: sender.view.cellSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { var gridColums = sender.getView().getGridColumns(); var column = gridColums[tip.triggerElement.cellIndex]; var record = sender.getView().getRecord(tip.triggerElement.parentNode); var dtitle = createNode(record.getData().text); dtitle = dtitle.getAttribute('data-title'); if (dtitle!="") { tip.update(dtitle); } else { return false } } } }); } 2. node := aTreeview.Items.AddChildObject(aParentNode, '<span data-title="'+ anItem.Items[I].Hint +'">' + anItem.Items[I].Caption + '</span>', anItem.Items[I]); to increase the font size I tried but it doesn't work dtitle = "<a style=''font-size:14px;''>" + dtitle + "</a>"; function afterrender(sender, eOpts) { const createNode = (htmlStr) => { const doc = new DOMParser().parseFromString(htmlStr, 'text/html'); const element = doc.body.children[0]; return element; }; sender.getView().tip = Ext.create('Ext.tip.ToolTip', { target: sender.getView().getEl(), delegate: sender.view.cellSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { var gridColums = sender.getView().getGridColumns(); var column = gridColums[tip.triggerElement.cellIndex]; var record = sender.getView().getRecord(tip.triggerElement.parentNode); var dtitle = createNode(record.getData().text); dtitle = dtitle.getAttribute('data-title'); -> dtitle = "<a style=''font-size:14px;''>" + dtitle + "</a>"; <- if (dtitle!="") { tip.update(dtitle); } else { return false } } }, }); Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 6, 2023 Share Posted October 6, 2023 Well, At least you saw and participated in this post: Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 6, 2023 Author Share Posted October 6, 2023 15 minutes ago, Sherzod said: Bem, Pelo menos você viu e participou deste post: This post is mine and I hadn't thought of it, It works But I still can't use the menu, could my colleague help me with how to increase the font size of the menu hints ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 6, 2023 Share Posted October 6, 2023 8 minutes ago, Luciano França said: But I still can't use the menu, could my colleague help me with how to increase the font size of the menu hints ? Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 6, 2023 Author Share Posted October 6, 2023 4 minutes ago, Sherzod said: Show like your colleague did With this approach I cannot procedure TMainForm.UniFormReady(Sender: TObject); begin JSInterface.JSCall('setTooltip', [Admin1.Caption], Admin1.JSMenuItem); end; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 6, 2023 Share Posted October 6, 2023 2 minutes ago, Luciano França said: With this approach I cannot 1. procedure TMainForm.UniFormReady(Sender: TObject); begin JSInterface.JSCall('setTooltip', ['<span class="hintClass">Test</span>'], test1.JSMenuItem); end; 2. CustomCSS: .hintClass{ font-size: 20px; } Result: Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 6, 2023 Author Share Posted October 6, 2023 1 hour ago, Sherzod said: 1. procedure TMainForm.UniFormReady(Sender: TObject); begin JSInterface.JSCall('setTooltip', ['<span class="hintClass">Test</span>'], test1.JSMenuItem); end; 2. CustomCSS: .hintClass{ font-size: 20px; } Result: Fantastic I am very grateful Now I'm just banging my head about the duration As I have hints with large texts I need to increase the time I tested .hintClass { color: black; duration:999999999; -> Does not work showDelay:999999999; -> Does not work dismissDelay:999999999; -> Does not work autoCloseDelay: 999999999; -> Does not work font-size: 16px; } Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 6, 2023 Share Posted October 6, 2023 2 hours ago, Luciano França said: .hintClass { color: black; duration:999999999; -> Does not work showDelay:999999999; -> Does not work dismissDelay:999999999; -> Does not work autoCloseDelay: 999999999; -> Does not work font-size: 16px; } Wrong. 2 hours ago, Luciano França said: Now I'm just banging my head about the duration As I have hints with large texts I need to increase the time I tested "20 seconds": JSInterface.JSCall('setTooltip', [JSInterface.JSStatement('{text: ''<span class="hintClass">Test</span>'', dismissDelay: 20000}')], test1.JSMenuItem); Quote Link to comment Share on other sites More sharing options...
Luciano França Posted October 6, 2023 Author Share Posted October 6, 2023 2 hours ago, Sherzod said: Wrong. "20 seconds": JSInterface.JSCall('setTooltip', [JSInterface.JSStatement('{text: ''<span class="hintClass">Test</span>'', dismissDelay: 20000}')], test1.JSMenuItem); Once a master of magicians always a Master. Much obliged. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.