put in mouse over show bigger image

UI/src/app/person/family.orga.html

@@ -9,14 +9,24 @@
     <!-- selectionMode="multiple" [(selection)]="selectedNodes" -->
     <p-organization-chart [value]="familyTree()" [collapsible]="true">
         <ng-template let-node pTemplate="default">
-            <div class="flex flex-col items-center">
+            <div #targetEl class="flex flex-col items-center">
                 @if (node.data.image != "")
                 {
-                  <img [src]= "node.data.image" class="mb-2 w-12 h-12 rounded-full " />
+                  <img (mouseover)="op.show($event, targetEl)"  [src]= "node.data.image" class="mb-2 w-12 h-12 rounded-full " />
                 }
                 <!--img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" /-->
                 <div class="mt-2 font-medium text-lg">{{ node.label }}</div>
-                <div>{{ node.data.sex }} </div>
+                <div>{{ node.data.sex }} </div>                  
+                <p-popover #op  class="flex w-2/5 h-2/5">
+                     @if (node.data.image != "")
+                    {                        
+                        <div>
+                            
+                            <p-button (onClick)="op.hide()" icon="pi pi-times" [rounded]="true" [text]="true" severity="danger" class="flex justify-end mb-2" />
+                            <img [src]= "node.data.image" alt="person profile"  />   
+                        </div>
+                    }
+                </p-popover>
             </div>
         </ng-template>
     </p-organization-chart>

UI/src/app/person/family.orga.ts

@@ -17,11 +17,12 @@ import { PersonEdit } from './person.edit';
 import { MessageService } from 'primeng/api';
 import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
 import { Utils } from '../shares';
+import { PopoverModule } from 'primeng/popover';
 
 @Component({
   selector: 'family-orga',
   templateUrl: './family.orga.html',
-  imports:[TableModule,FormsModule,TreeModule, OrganizationChartModule,CommonModule,ButtonModule,InputTextModule],
+  imports:[TableModule,FormsModule,TreeModule,PopoverModule, OrganizationChartModule,CommonModule,ButtonModule,InputTextModule],
   styleUrls: ['./family.orga.css'],
   providers: [DialogService]
 })