How to add "node.data.qtip" or "node.data.qtitle" in "TUniTreeView"

[Luciano França]

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);
				
            }
        }
    });
}

 

[Sherzod]

Hello,

Please provide a more detailed statement of the task and what needs to be done...

[Luciano França]

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

[Sherzod]

If you have a test case, please attach here, I'll try to check it.

[Luciano França]

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

[Sherzod]

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]);

 

[Luciano França]

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

 

 

 

 

[Sherzod]

Do you want to use Ext.tip.ToolTip?

[Luciano França]

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

[Sherzod]

FontSize for the tooltip?

[Luciano França]

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

 

 

[Sherzod]

Just now, Luciano França said:

13 minutes ago, Sherzod said:

FontSize for the tooltip?

Yes

Ok I will try.

[Luciano França]

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.

[Sherzod]

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]);

 

[Luciano França]

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
                }                 
                 
            }
        },
    
                 
    });

 

[Sherzod]

Well,

 

At least you saw and participated in this post:

 

[Luciano França]

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 ?

 

 

 

[Sherzod]

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 ?

[Luciano França]

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;

 

[Sherzod]

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:

[Luciano França]

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;  
}

 

 

[Sherzod]

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);

 

[Luciano França]

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.