From d59c367cf2613cd38b20e510b46515bbcf965cef Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Sat, 23 Dec 2023 14:55:24 +0100
Subject: [PATCH 01/23] fix: css for login width, inline form labels, site
 admin menu, data property control panel buttons

---
 .../main/webapp/themes/wilma/css/wilma.css    | 393 +++++++++++++++++-
 1 file changed, 390 insertions(+), 3 deletions(-)

diff --git a/webapp/src/main/webapp/themes/wilma/css/wilma.css b/webapp/src/main/webapp/themes/wilma/css/wilma.css
index 0a7c4fdb26..cd6e5edcb6 100644
--- a/webapp/src/main/webapp/themes/wilma/css/wilma.css
+++ b/webapp/src/main/webapp/themes/wilma/css/wilma.css
@@ -98,6 +98,7 @@ input.block {
 label {
     margin-top: .5em;
     margin-bottom: .5em;
+    display: block;
 }
 label.inline {
     display: inline;
@@ -240,9 +241,23 @@ p.submit {
 .editingForm table {
     border-color: #dfe6e6;
 }
-.editingForm td {
+
+.editingForm > table > tbody > tr > td.verticalfieldlabel {
     padding: 3px;
 }
+
+.editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
+    width: 40%;
+}
+
+
+@media (min-width: 768px) {
+    .editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
+        width: 15%;
+    }
+}
+
+
 .editingForm .entryFormHead {
     background-color: #f1f2ee;
     border-color: #dfe6e6;
@@ -608,13 +623,14 @@ ul.individual-urls-people li a {
 /* LOG IN------>  */
 #login {
     float: right;
-    width: 314px;
+    max-width: 332px;
     border: 1px solid #e8ece9;
     margin-right: 25px;
     padding-bottom: 30px;
     margin-bottom: 30px;
     overflow: hidden;
-    margin-top: 20px;
+    margin-top: 30px;
+    padding: 15px;
 }
 body.login #login {
     float: none;
@@ -649,6 +665,11 @@ h3.internal-auth:hover {
     color: #a12424;
     padding-top: 5px;
 }
+
+#login-form > div {
+    padding: 10px 28px;
+}
+
 #login-form label {
     display: block;
     color: #5e6363;
@@ -743,6 +764,7 @@ p.password-note {
     margin-top: -10px;
     margin-right:-10px;
     height:34px;
+    padding: 10px;
 }
 p.external-auth {
     margin: 0 auto;
@@ -1559,6 +1581,7 @@ p.address-line {
 /* ------------------------------------------------->  */
 /* SITE ADMIN DASHBOARD ---------------------------->  */
 /* ------------------------------------------------->  */
+
 #adminDashboard .pageBodyGroup {
   padding: 0 1em .5em 1em;
 }
@@ -1733,3 +1756,367 @@ span.subclassExpandMinus {
     background:url(../images/green_minus_sign.gif) right center no-repeat;
     min-height:18px;
 }
+
+/* ------------------------------------------------->  */
+/* CAPABILITY MAP  --------------------------------->  */
+/* ------------------------------------------------->  */
+
+#wrapper-content #main-content #container {
+    width: initial !important;
+    margin-left: initial !important;
+}
+
+#helptext {
+    width: 100%;
+}
+
+
+#right-container {
+    width: 100%;
+    position: relative;
+    float: left;
+}
+
+.tabs {
+    width: 100%;
+}
+
+.tabs ul.titles li a, .tabs ul.titles li a{
+    width: 50%;
+}
+
+#center-container {
+    position: relative;
+    width: 100% !important;
+}
+
+@media (min-width: 768px) {
+    #adminDashboard .pageBodyGroup {
+        flex: 0 0 auto;
+        width: 50%;
+    }
+
+    #right-container {
+        width: 30%;
+        position: absolute;
+    }
+
+    #helptext {
+        width: 70%;
+        padding-right: 10px;
+    }
+
+    #center-container {
+        position: absolute;
+    }
+    
+}
+
+#cutofflabel {
+    width: initial;
+}
+
+#queryform input[type="text"], select, input[type="password"]{
+    max-width: 100%;
+}
+
+#queryCutoff {
+    margin-left: -54px;
+}
+
+#infovis {
+    width: 100% !important;
+}
+
+#infovis > svg {
+    width: 100% !important;
+}
+
+/* Author Network */
+
+.propertyTabsList {
+    display: flex;
+}
+
+#body {
+    min-width: initial;
+}
+
+#chord {
+    width: 100%;
+    float: left !important;
+    overflow: auto;
+}
+
+
+#chord > svg {
+    transform-origin: 0 50%;
+    -webkit-transform-origin: 0 50%;
+    -ms-transform-origin: 0 50%;
+    transform-origin: 0 50%;
+}
+
+@media (max-width: 360px) {
+    #chord > svg {
+        scale: 0.3;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+@media (min-width: 361px) and (max-width: 399px) {
+    #chord > svg {
+        scale: 0.4;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+@media (min-width: 400px) and (max-width: 449px) {
+    #chord > svg {
+        scale: 0.44;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+
+@media (min-width: 450px) and (max-width: 499px) {
+    #chord > svg {
+        scale: 0.5;
+    }
+    
+    #chord-info-div {
+        scale: 0.7;
+    }
+}
+
+
+
+@media (min-width: 500px) and (max-width: 575px) {
+    #chord > svg {
+        scale: 0.55;
+    }
+    
+    #chord-info-div {
+        scale: 0.8;
+    }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+    #chord > svg {
+        scale: 0.6;
+    }
+}
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+    #chord > svg {
+        scale: 0.8;
+    }
+}
+
+
+
+#sparkline-container-full > #publication-count-sparkline-include {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+
+#sparkline-container-full > #coauthor-count-sparkline-include {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+#sparkline-container-full .google-visualization-sparkline-default img.google-visualization-sparkline-image {
+    max-width: 100%;
+}
+
+
+#body .vis-tables {
+    width: 100%;
+    margin-bottom: 0px;
+}
+
+@media (min-width: 768px) {
+    #sparkline-container-full > #publication-count-sparkline-include {
+        width: 50%;
+        margin-bottom: 15px;
+    }
+    #sparkline-container-full > #coauthor-count-sparkline-include {
+        width: 50%;
+        margin-bottom: 15px;
+    }
+    #body .vis-tables {
+        width: 48%;
+        margin-bottom: 15px;
+    }
+}
+
+#graphContainer {
+    width: 100%;
+    position: relative;
+    overflow-x: auto;
+    height: 100%;
+}
+
+#leftblock {
+    width: 100%;
+}
+
+#rightblock {
+    width: 100%;
+    margin-right: 0;
+}
+
+@media (min-width: 768px) {
+    #leftblock {
+        width: 39%;
+    }
+    
+    #rightblock {
+        width: 54%;
+    }
+}
+
+#temporal-graph {
+    height: 100%;
+    overflow-x: auto;
+}
+
+#temporal-graph-response > .blockUI  {
+    width: 100%;
+    max-width: 420px;
+    left: 0;
+}
+
+
+.editingForm > table > tbody > tr {
+    text-wrap: wrap;
+    line-break: anywhere;
+    line-height: unset;
+}
+
+/* table.form-background tr td {
+    width: 100%;
+    display: block;
+} */
+
+#wrapper-content > div > div > div > div > table > tbody > tr > td > div > form > div {
+    display: flex;
+    flex-direction: column;
+}
+
+#wrapper-content  table > tbody > tr.header > td.verticalfieldlabel {
+    width: 100px;
+}
+
+#container section table tbody .subclassCell {
+    word-wrap: break-word;
+}
+
+table.classHierarchy {
+    min-width: initial;
+    max-width: initial;
+    width: calc(100% - 25);
+}
+
+section#container div {
+    width: initial;
+}
+
+section#container div {
+    width: initial;
+}
+
+#noLocalOntologyExists {
+    width: 100%;
+}
+
+#noLocalOntologyExists blockquote {
+    text-wrap: wrap;
+    word-break: break-word;
+}
+
+.proxy-profile {
+    width: 100%;
+}
+
+.proxy-profile .proxy {
+    width: 100%;
+}
+
+.proxy-profile .profile {
+    width: 100%;
+    padding-left: 0;
+}
+
+@media (min-width: 768px) {
+    .proxy-profile .proxy {
+        width: 50%;
+    }
+    
+    .proxy-profile .profile {
+        width: 50%;
+        padding-left: 12px;
+    }
+}
+
+ul.menuItems {
+    max-width: 300px;
+    width: initial;
+}
+
+section#floatRight {
+    width: initial;
+}
+
+#managePage #floatRight {
+    width: 100%;
+    float: unset;
+}
+
+#managePage #leftSide {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    #managePage #floatRight {
+        width: initial;
+        float: right;
+    }
+    
+    #managePage #leftSide {
+        width: initial;
+    }
+}
+
+.customForm {
+    width: 100%;
+    overflow-x: auto;
+}
+
+.classHierarchy {
+    word-break: break-all;
+}
+
+#startup-trace h4, #startup-trace li{
+    overflow-wrap: anywhere;
+}
+
+#indexer {
+    overflow-x: auto;
+}
+
+form li {
+    overflow-wrap: break-word;
+}

From 409ba987d1602458f22fa980528703ff79def29f Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Tue, 30 Jan 2024 15:19:39 +0100
Subject: [PATCH 02/23] Replaced Qtip with Popper and bootstrap

---
 .../js/individual/individualQtipBubble.js     | 95 +++++--------------
 .../mapofscience/VisCommonControl.js          | 68 ++++++-------
 .../individual--foaf-person-2column.ftl       |  5 +-
 .../individual--foaf-person-quickview.ftl     |  5 +-
 .../mapOfScience/mapOfScienceStandalone.ftl   |  4 +-
 .../webapp/themes/nemo/templates/head.ftl     |  2 +
 .../templates/individual--foaf-person.ftl     |  2 -
 .../nemo/templates/individual-vitro.ftl       |  3 +-
 .../nemo/templates/mapOfScienceStandalone.ftl |  2 -
 .../individual/individual--foaf-person.ftl    |  3 -
 .../webapp/themes/wilma/templates/head.ftl    |  3 +
 .../templates/individual--foaf-person.ftl     |  5 +-
 12 files changed, 70 insertions(+), 127 deletions(-)

diff --git a/webapp/src/main/webapp/js/individual/individualQtipBubble.js b/webapp/src/main/webapp/js/individual/individualQtipBubble.js
index 78d484acc9..7f516dbd2e 100644
--- a/webapp/src/main/webapp/js/individual/individualQtipBubble.js
+++ b/webapp/src/main/webapp/js/individual/individualQtipBubble.js
@@ -1,83 +1,40 @@
 /* $This file is distributed under the terms of the license in LICENSE$ */
 
 $(document).ready(function(){
-    // This function creates and styles the "qTip" tooltip that displays the bubble text when the user hovers
+    // This function creates and styles the bootstrap-popper tooltip that displays the bubble text when the user hovers
     // over the research area "group" icon.
 
     $.extend(this, i18nStrings);
 
-    $('head').append('<style id="researchAreaCSS">.qtip { font-size: 14px; max-width: none !important; } .researchAreaTip { background: url(' + imagesPath + '/individual/researchAreaBubble.png) no-repeat; } </style>');
-
-    $('#researchAreaIcon').each(function()
-    {
-        $(this).qtip(
+    let tooltips = [
         {
-            prerender: true,
-            content: {
-                text: '<div style="padding-top:0.5em;margin-left:-14px;color:white">' + i18nStrings.researchAreaTooltipOne + '</div><div style="margin-left:-14px;color:white">' + i18nStrings.researchAreaTooltipTwo + '</div>'
-            },
-            position: {
-                my: 'top left',
-                at: 'bottom center',
-                adjust: {
-                    x:22,
-                    y:30
-                }
-            },
-            style: {
-                classes: 'researchAreaTip',
-                height: 56,
-                width: 180,
+            querySelector: "#researchAreaIcon",
+            data: {
+                title: "<div>" + i18nStrings.researchAreaTooltipOne + "</div><div>" + i18nStrings.researchAreaTooltipTwo + "</div>",
+                html: true,
+                fallbackPlacements: ['bottom', 'left', 'top', 'right']
             }
-        });
-    });
-
-    $('head').append('<style id="bubbleCSS">.qtip { font-size: 14px; max-width: none !important; } .bubbleTip { url(' + imagesPath + '/individual/toolTipBubble.png) no-repeat; } </style>');
-
-    $('#fullViewIcon').each(function()
-    {
-        $(this).qtip(
+        },
         {
-            content: {
-                text: '<div style="padding-top:0.5em;color:white">' + i18nStrings.quickviewTooltip + '</div>'
-            },
-            position: {
-                my: 'top left',
-                at: 'bottom center',
-                adjust: {
-                    x:27,
-                    y:30
-                }
-            },
-            style: {
-                classes: 'bubbleTip',
-                height: 56,
-                width: 140,
-
+            querySelector: "#fullViewIcon",
+            data: {
+                content: i18nStrings.quickviewTooltip,
+                html: true,
+                fallbackPlacements: ['bottom', 'left', 'top', 'right']
             }
-        });
-    });
-
-    $('#quickViewIcon').each(function()
-    {
-        $(this).qtip(
+        },
         {
-            content: {
-                text: '<div style="padding-top:0.5em;color:white">' + i18nStrings.standardviewTooltipOne + '</div><div style="color:white">' + i18nStrings.standardviewTooltipTwo + '</div>'
-            },
-            position: {
-                my: 'top left',
-                at: 'bottom center',
-                adjust: {
-                    x:28,
-                    y:30
-                }
-            },
-            style: {
-                classes: 'bubbleTip',
-                height: 56,
-                width: 144,
+            querySelector: "#quickViewIcon",
+            data: {
+                content: "<div>" + i18nStrings.standardviewTooltipOne + '</div><div>' + i18nStrings.standardviewTooltipTwo + "</div>",
+                html: true,
+                fallbackPlacements: ['bottom', 'left', 'top', 'right']
             }
-        });
-    });
+        },
+    ]
+
+    tooltips.forEach(tooltip => {
+        setTooltip(tooltip.querySelector, tooltip.data)
+    })
+
 });
diff --git a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
index 27f34d4927..96d8d78954 100644
--- a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
+++ b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
@@ -83,37 +83,37 @@ function initVisModeTypeButton() {
 	$(viewTypeRadio+ ":eq(0)").click();
 }
 
-function initGlobalToolTips() {
-	createToolTip($("#imageIconOne"), $('#toolTipOne').html(), "top left");
-	createToolTip($("#exploreInfoIcon"), $('#exploreTooltipText').html(), "top left");
-	createToolTip($("#compareInfoIcon"), $('#compareTooltipText').html(), "top left");
-	createToolTip($("#imageIconThree"), $('#toolTipThree').html(), "top right");
-}
-
-var visCommonToolTipInit = true;
-function createToolTip(target, tipText, tipLocation) {
-	if (visCommonToolTipInit) {
-		$('head').append('<style id="visCommonToolTipCSS">.qtip { font-size: .7em; max-width: none !important; } .visCommonToolTip {'
-			+ ' background-color: #ffffc0;'
-			+ ' textAlign: left;'
-			+ ' padding: 6px 10px 6px 10px;'
-			+ ' lineHeight: 14px;'
-			+ '} </style>');
-
-		visCommonToolTipInit = false;
-	}
-
-	target.qtip({
-        content: {
-            text: tipText
-        },
-		position: {
-			my: tipLocation,
-			at: 'center'
-		},
-        style: {
-			classes: 'visCommonToolTip',
-            width: 500,
-        }
-    });
-}
+// function initGlobalToolTips() {
+// 	createToolTip($("#imageIconOne"), $('#toolTipOne').html(), "top left");
+// 	createToolTip($("#exploreInfoIcon"), $('#exploreTooltipText').html(), "top left");
+// 	createToolTip($("#compareInfoIcon"), $('#compareTooltipText').html(), "top left");
+// 	createToolTip($("#imageIconThree"), $('#toolTipThree').html(), "top right");
+// }
+
+// var visCommonToolTipInit = true;
+// function createToolTip(target, tipText, tipLocation) {
+// 	if (visCommonToolTipInit) {
+// 		$('head').append('<style id="visCommonToolTipCSS">.qtip { font-size: .7em; max-width: none !important; } .visCommonToolTip {'
+// 			+ ' background-color: #ffffc0;'
+// 			+ ' textAlign: left;'
+// 			+ ' padding: 6px 10px 6px 10px;'
+// 			+ ' lineHeight: 14px;'
+// 			+ '} </style>');
+
+// 		visCommonToolTipInit = false;
+// 	}
+
+// 	target.qtip({
+//         content: {
+//             text: tipText
+//         },
+// 		position: {
+// 			my: tipLocation,
+// 			at: 'center'
+// 		},
+//         style: {
+// 			classes: 'visCommonToolTip',
+//             width: 500,
+//         }
+//     });
+// }
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index a786aeb654..5b0ae2aabb 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -191,16 +191,13 @@ var i18nStringsUriRdf = {
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-2column-view.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />',
-                  '<link rel="stylesheet" type="text/css" href="${urls.base}/css/jquery_plugins/qtip/jquery.qtip.min.css" />')}
+                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip.min.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
-              '<script async type="text/javascript" src="${urls.base}/js/individual/individualQtipBubble.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualUtils.js?vers=1.5.1"></script>',
 			  '<script async type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
index 2286832529..637593f9ce 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
@@ -250,17 +250,14 @@ var i18nStringsUriRdf = {
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-quick-view.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />',
-                  '<link rel="stylesheet" type="text/css" href="${urls.base}/css/jquery_plugins/qtip/jquery.qtip.min.css" />')}
+                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip.min.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/amplify/amplify.store.min.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
-              '<script async type="text/javascript" src="${urls.base}/js/individual/individualQtipBubble.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
index a0441bd2b2..5651b4ed79 100644
--- a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
@@ -85,7 +85,5 @@ corresponding changes in the included Templates. -->
     </div>
 </div>
 
-${headScripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip.min.js"></script>')}
 
-${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />',
-                  '<link rel="stylesheet" type="text/css" href="${urls.base}/css/jquery_plugins/qtip/jquery.qtip.min.css" />')}
+${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />')}
diff --git a/webapp/src/main/webapp/themes/nemo/templates/head.ftl b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
index de486fc0f9..5e7386670b 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
@@ -19,6 +19,8 @@
                           '<script type="text/javascript" src="${urls.base}/js/openSocial/orng.js"></script>')}
     </#if>	
 </#if>	
+<script src="${urls.base}/js/tooltip/tooltip-utils.js"></script>
+<script src="${urls.base}/js/tooltip/popper.min.js"></script>
 
 <#include "stylesheets.ftl">
 <#-- <link rel="stylesheet" href="${urls.theme}/css/screen.css" /> -->
diff --git a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
index aaecbb86b0..b38a9ea906 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
@@ -213,12 +213,10 @@ Add divs and wrapper to create funnelback basket controls. MUST BE REMOVED BEFOR
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
 	'<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/individual/individualQtipBubble.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
diff --git a/webapp/src/main/webapp/themes/nemo/templates/individual-vitro.ftl b/webapp/src/main/webapp/themes/nemo/templates/individual-vitro.ftl
index 81356e6459..67345aaad9 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/individual-vitro.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/individual-vitro.ftl
@@ -103,8 +103,7 @@
 </script>
 
 
-${headScripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>',
-				  '<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>')}
+${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/imageUpload/imageUploadUtils.js"></script>',
 			  '<script type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
diff --git a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceStandalone.ftl b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceStandalone.ftl
index c7f5d2adce..618d2726ae 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceStandalone.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceStandalone.ftl
@@ -92,6 +92,4 @@ corresponding changes in the included Templates. -->
     </div>
 </div>
 
-${headScripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>')}
-
 ${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />')}
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
index 5aba938c81..82a0b5c2b0 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
@@ -181,19 +181,16 @@ ${stylesheets.add(
 	'<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
 	'<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
 	'<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />',
-	'<link rel="stylesheet" type="text/css" href="${urls.base}/css/jquery_plugins/qtip/jquery.qtip.min.css" />'
 )}
 
 ${headScripts.add(
 	'<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip.min.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>'
 )}
 
 ${scripts.add(
 	'<script async type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
 	'<script async type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
-	'<script async type="text/javascript" src="${urls.base}/js/individual/individualQtipBubble.js"></script>',
 	'<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
     '<script async type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
 	'<script async type="text/javascript" src="${urls.base}/js/imageUpload/imageUploadUtils.js"></script>',
diff --git a/webapp/src/main/webapp/themes/wilma/templates/head.ftl b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
index 06af8d7a2f..853b69e1ff 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
@@ -18,6 +18,9 @@
     </#if>
 </#if>
 
+${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>')}
+${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
+
 <#include "stylesheets.ftl">
 <link rel="stylesheet" href="${urls.theme}/css/screen.css" />
 
diff --git a/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl
index 20e3f8cd40..be0f0621ca 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl
@@ -182,15 +182,12 @@
 
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />',
-                  '<link rel="stylesheet" type="text/css" href="${urls.base}/css/jquery_plugins/qtip/jquery.qtip.min.css" />')}
+                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/qtip/jquery.qtip.min.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
-              '<script type="text/javascript" src="${urls.base}/js/individual/individualQtipBubble.js"></script>',
               '<script type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
 			  '<script type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
               '<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',

From b4b82a80a84292c9eb044b486dd2d051dcda7b46 Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Tue, 30 Jan 2024 21:02:15 +0100
Subject: [PATCH 03/23] Remove Qtip from ViSCommonControl is map of science

---
 ...ipBubble.js => individualTooltipBubble.js} |  9 ++-
 .../mapofscience/VisCommonControl.js          | 76 ++++++++++---------
 .../individual--foaf-person-2column.ftl       |  1 +
 .../individual--foaf-person-quickview.ftl     |  1 +
 .../templates/individual--foaf-person.ftl     |  1 +
 .../individual/individual--foaf-person.ftl    |  1 +
 .../templates/individual--foaf-person.ftl     |  1 +
 7 files changed, 53 insertions(+), 37 deletions(-)
 rename webapp/src/main/webapp/js/individual/{individualQtipBubble.js => individualTooltipBubble.js} (91%)

diff --git a/webapp/src/main/webapp/js/individual/individualQtipBubble.js b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
similarity index 91%
rename from webapp/src/main/webapp/js/individual/individualQtipBubble.js
rename to webapp/src/main/webapp/js/individual/individualTooltipBubble.js
index 7f516dbd2e..6db1279477 100644
--- a/webapp/src/main/webapp/js/individual/individualQtipBubble.js
+++ b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
@@ -12,7 +12,8 @@ $(document).ready(function(){
             data: {
                 title: "<div>" + i18nStrings.researchAreaTooltipOne + "</div><div>" + i18nStrings.researchAreaTooltipTwo + "</div>",
                 html: true,
-                fallbackPlacements: ['bottom', 'left', 'top', 'right']
+                fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+				customClass: "vivoTooltip"
             }
         },
         {
@@ -20,7 +21,8 @@ $(document).ready(function(){
             data: {
                 content: i18nStrings.quickviewTooltip,
                 html: true,
-                fallbackPlacements: ['bottom', 'left', 'top', 'right']
+                fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+				customClass: "vivoTooltip"
             }
         },
         {
@@ -28,7 +30,8 @@ $(document).ready(function(){
             data: {
                 content: "<div>" + i18nStrings.standardviewTooltipOne + '</div><div>' + i18nStrings.standardviewTooltipTwo + "</div>",
                 html: true,
-                fallbackPlacements: ['bottom', 'left', 'top', 'right']
+                fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+				customClass: "vivoTooltip"
             }
         },
     ]
diff --git a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
index 96d8d78954..b698c2b911 100644
--- a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
+++ b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
@@ -83,37 +83,45 @@ function initVisModeTypeButton() {
 	$(viewTypeRadio+ ":eq(0)").click();
 }
 
-// function initGlobalToolTips() {
-// 	createToolTip($("#imageIconOne"), $('#toolTipOne').html(), "top left");
-// 	createToolTip($("#exploreInfoIcon"), $('#exploreTooltipText').html(), "top left");
-// 	createToolTip($("#compareInfoIcon"), $('#compareTooltipText').html(), "top left");
-// 	createToolTip($("#imageIconThree"), $('#toolTipThree').html(), "top right");
-// }
-
-// var visCommonToolTipInit = true;
-// function createToolTip(target, tipText, tipLocation) {
-// 	if (visCommonToolTipInit) {
-// 		$('head').append('<style id="visCommonToolTipCSS">.qtip { font-size: .7em; max-width: none !important; } .visCommonToolTip {'
-// 			+ ' background-color: #ffffc0;'
-// 			+ ' textAlign: left;'
-// 			+ ' padding: 6px 10px 6px 10px;'
-// 			+ ' lineHeight: 14px;'
-// 			+ '} </style>');
-
-// 		visCommonToolTipInit = false;
-// 	}
-
-// 	target.qtip({
-//         content: {
-//             text: tipText
-//         },
-// 		position: {
-// 			my: tipLocation,
-// 			at: 'center'
-// 		},
-//         style: {
-// 			classes: 'visCommonToolTip',
-//             width: 500,
-//         }
-//     });
-// }
+function initGlobalToolTips() {
+
+	let tooltips = [
+		{
+			querySelector: "#imageIconOne",
+			data: {
+				title: "<div style='padding: 16px 22px;'>" + $('#toolTipOne').html() + "</div>",
+				customClass: "vivoTooltip vivoTooltip-yellow",
+				html: true,
+				fallbackPlacements: ['right', 'bottom', 'top', 'left']
+			}
+		},{
+			querySelector: "#exploreInfoIcon",
+			data: {
+				title: "<div style='padding: 16px 22px;'>" + $('#exploreTooltipText').html() + "</div>",
+				customClass: "vivoTooltip vivoTooltip-yellow",
+				html: true,
+				fallbackPlacements: ['right', 'bottom', 'top', 'left']
+			}
+		},{
+			querySelector: "#compareInfoIcon",
+			data: {
+				title: "<div style='padding: 16px 22px;'>" + $('#compareTooltipText').html() + "</div>",
+				customClass: "vivoTooltip vivoTooltip-yellow",
+				html: true,
+				fallbackPlacements: ['right', 'bottom', 'top', 'left']
+			}
+		},{
+			querySelector: "#imageIconThree",
+			data: {
+				title: "<div style='padding: 16px 22px;'>" + $('#toolTipThree').html() + "</div>",
+				customClass: "vivoTooltip vivoTooltip-yellow",
+				html: true,
+				fallbackPlacements: ['left', 'bottom', 'top', 'right']
+			}
+		},
+	]
+
+	tooltips.forEach(tooltip => {
+		setTooltip(tooltip.querySelector, tooltip.data)
+	})
+}
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index 5b0ae2aabb..cc927cef9d 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -198,6 +198,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
+              '<script async type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualUtils.js?vers=1.5.1"></script>',
 			  '<script async type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
index 637593f9ce..438a52ed20 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
@@ -258,6 +258,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
+              '<script async type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
diff --git a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
index b38a9ea906..4f567a8312 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
@@ -217,6 +217,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
 	'<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
index 82a0b5c2b0..2ecb95fe52 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
@@ -191,6 +191,7 @@ ${headScripts.add(
 ${scripts.add(
 	'<script async type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
 	'<script async type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
+	'<script async type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
 	'<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
     '<script async type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
 	'<script async type="text/javascript" src="${urls.base}/js/imageUpload/imageUploadUtils.js"></script>',
diff --git a/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl
index be0f0621ca..c96dd73774 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl
@@ -188,6 +188,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
               '<script type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
 			  '<script type="text/javascript" src="${urls.base}/js/individual/moreLessController.js"></script>',
               '<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',

From 6d71b1ed3a3826d0afa01566f8c6e971d03056cc Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Mon, 12 Feb 2024 17:00:02 +0100
Subject: [PATCH 04/23] Fixed popper for Vitro, Nemo and Tenderfoot themes

---
 .../js/individual/individualTooltipBubble.js  |  4 +-
 .../mapofscience/VisCommonControl.js          | 12 +++--
 .../individual--foaf-person-2column.ftl       |  9 +++-
 .../individual--foaf-person-quickview.ftl     |  7 ++-
 .../mapOfScience/mapOfScienceStandalone.ftl   |  7 ++-
 .../src/main/webapp/themes/nemo/css/theme.css | 44 +++++++++++++++++
 .../templates/individual--foaf-person.ftl     |  5 +-
 .../nemo/templates/mapOfScienceSetup.ftl      |  4 ++
 .../themes/tenderfoot/css/tenderfoot.css      | 47 +++++++++++++++++++
 .../js/propertyGroupControls-bootstrap.js     |  2 +-
 .../individual/individual--foaf-person.ftl    |  9 ++--
 .../individual-property-group-tabs.ftl        |  6 +--
 .../templates/page/partials/headScripts.ftl   |  6 +--
 13 files changed, 138 insertions(+), 24 deletions(-)

diff --git a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
index 6db1279477..266402110c 100644
--- a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
+++ b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
@@ -19,7 +19,7 @@ $(document).ready(function(){
         {
             querySelector: "#fullViewIcon",
             data: {
-                content: i18nStrings.quickviewTooltip,
+                title: i18nStrings.quickviewTooltip,
                 html: true,
                 fallbackPlacements: ['bottom', 'left', 'top', 'right'],
 				customClass: "vivoTooltip"
@@ -28,7 +28,7 @@ $(document).ready(function(){
         {
             querySelector: "#quickViewIcon",
             data: {
-                content: "<div>" + i18nStrings.standardviewTooltipOne + '</div><div>' + i18nStrings.standardviewTooltipTwo + "</div>",
+                title: "<div>" + i18nStrings.standardviewTooltipOne + '</div><div>' + i18nStrings.standardviewTooltipTwo + "</div>",
                 html: true,
                 fallbackPlacements: ['bottom', 'left', 'top', 'right'],
 				customClass: "vivoTooltip"
diff --git a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
index b698c2b911..27d4c149b7 100644
--- a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
+++ b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
@@ -89,33 +89,37 @@ function initGlobalToolTips() {
 		{
 			querySelector: "#imageIconOne",
 			data: {
-				title: "<div style='padding: 16px 22px;'>" + $('#toolTipOne').html() + "</div>",
+				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#toolTipOne').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
+				sanitize: false,
 				fallbackPlacements: ['right', 'bottom', 'top', 'left']
 			}
 		},{
 			querySelector: "#exploreInfoIcon",
 			data: {
-				title: "<div style='padding: 16px 22px;'>" + $('#exploreTooltipText').html() + "</div>",
+				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#exploreTooltipText').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
+				sanitize: false,
 				fallbackPlacements: ['right', 'bottom', 'top', 'left']
 			}
 		},{
 			querySelector: "#compareInfoIcon",
 			data: {
-				title: "<div style='padding: 16px 22px;'>" + $('#compareTooltipText').html() + "</div>",
+				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#compareTooltipText').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
+				sanitize: false,
 				fallbackPlacements: ['right', 'bottom', 'top', 'left']
 			}
 		},{
 			querySelector: "#imageIconThree",
 			data: {
-				title: "<div style='padding: 16px 22px;'>" + $('#toolTipThree').html() + "</div>",
+				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#toolTipThree').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
+				sanitize: false,
 				fallbackPlacements: ['left', 'bottom', 'top', 'right']
 			}
 		},
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index cc927cef9d..80108aede9 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -188,14 +188,19 @@ var i18nStringsUriRdf = {
 };
 </script>
 
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/bootstrap-5.3.2/css/bootstrap.min.css" />',
+                  '<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-2column-view.css" />',
                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
+                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
+                  
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
index 438a52ed20..f3861e0dc9 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
@@ -250,12 +250,15 @@ var i18nStringsUriRdf = {
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-quick-view.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
+	              '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/amplify/amplify.store.min.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>')}
+                  '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+                  '<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
index 5651b4ed79..df47dfdcf6 100644
--- a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
@@ -86,4 +86,9 @@ corresponding changes in the included Templates. -->
 </div>
 
 
-${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />')}
+${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />',
+                  '<link rel="stylesheet" href="${urls.base}/bootstrap-5.3.2/css/bootstrap.min.css" />')}
+
+${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/nemo/css/theme.css b/webapp/src/main/webapp/themes/nemo/css/theme.css
index f839279f1d..73784d643d 100644
--- a/webapp/src/main/webapp/themes/nemo/css/theme.css
+++ b/webapp/src/main/webapp/themes/nemo/css/theme.css
@@ -268,3 +268,47 @@ These are helper classes to add margin gaps where needed
 .input-group-header-search {
 	
 }
+
+/* ------------------------------------------------->  */
+/* TOOLTIP  ---------------------------------------->  */
+/* ------------------------------------------------->  */
+.vivoTooltip {
+  opacity: 1 !important;
+  --bs-tooltip-max-width: 400px !important;
+}
+
+.vivoTooltip > .tooltip-inner {
+  background-color: #f1f2ee;
+  border: 1px solid #F1D031;
+  text-align: left;
+  border-radius: 0;
+  color: #333;
+}
+
+.vivoTooltip > .tooltip-inner h5 {
+  padding-bottom: 0;
+}
+
+.vivoTooltip > .tooltip-arrow::before {
+  --bs-tooltip-bg: #F1D031;
+}
+
+.tooltip:not(.vivoTooltip) > .tooltip-inner, .tooltip:not(.vivoTooltip) > .tooltip-inner * {
+  color: unset;
+}
+
+.downloadTip {
+  --bs-tooltip-max-width: 600px !important;
+}
+
+.vivoTooltip-yellow {
+  --bs-tooltip-max-width: 500px !important;
+}
+
+.vivoTooltip-yellow > .tooltip-inner {
+  background-color: #ffffc0;
+  font-size: 0.8em;
+  padding: 20px 22px;
+  text-align: left;
+  line-height: 12px;
+} 
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
index 4f567a8312..b334fbae19 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
@@ -214,7 +214,10 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
-	'<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>')}
+	'<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
diff --git a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
index da0ba4f33c..e0d9a02080 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
@@ -145,3 +145,7 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
                   '<link rel="stylesheet" href="${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />',
                   '<link rel="stylesheet" href="${urls.theme}/css/layout.css" />')}
 
+
+${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index 68da484afe..f34528f052 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -8,6 +8,8 @@ legend {
 
 #nav {
     background: #f7f9f9;
+    position: sticky;
+    top: 0;
 }
 
 #nav.affix {
@@ -365,3 +367,48 @@ img.add-individual {
     height: 15px;
     width: 15px;
 }
+
+/* ------------------------------------------------->  */
+/* TOOLTIP  ---------------------------------------->  */
+/* ------------------------------------------------->  */
+.vivoTooltip {
+    opacity: 1 !important;
+    --bs-tooltip-max-width: 400px !important;
+  }
+  
+  .vivoTooltip > .tooltip-inner {
+    background-color: #f1f2ee;
+    border: 1px solid #F1D031;
+    text-align: left;
+    border-radius: 0;
+    color: #333;
+    max-width: initial;
+  }
+  
+  .vivoTooltip > .tooltip-inner h5 {
+    padding-bottom: 0;
+  }
+  
+  .vivoTooltip > .tooltip-arrow::before {
+    --bs-tooltip-bg: #F1D031;
+  }
+  
+  .tooltip:not(.vivoTooltip) > .tooltip-inner, .tooltip:not(.vivoTooltip) > .tooltip-inner * {
+    color: unset;
+  }
+  
+  .downloadTip {
+    --bs-tooltip-max-width: 600px !important;
+  }
+  
+  .vivoTooltip-yellow {
+    --bs-tooltip-max-width: 500px !important;
+  }
+  
+  .vivoTooltip-yellow > .tooltip-inner {
+    background-color: #ffffc0;
+    font-size: 0.8em;
+    padding: 20px 22px;
+    text-align: left;
+    line-height: 12px;
+  } 
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js b/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
index 5be973429d..94700637c2 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
+++ b/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
@@ -27,7 +27,7 @@ $(document).ready(function(){
         return false;
     });
     $(window).on('popstate', function () {
-        var anchor = location.hash || $('li[data-toggle=\'tab\']').first().attr('href');
+        var anchor = location.hash || $('li[data-bs-toggle=\'tab\']').first().attr('href');
         $('li[href=\'' + anchor + '\']').tab('show');
         if (anchor == "#viewAll") {
             showViewAll();
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
index 2ecb95fe52..3e2a094143 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
@@ -180,13 +180,16 @@
 ${stylesheets.add(
 	'<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
 	'<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
-	'<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />',
+	'<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />'
 )}
 
 ${headScripts.add(
 	'<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>'
-)}
+	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+	'<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>'
+ )}
 
 ${scripts.add(
 	'<script async type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>',
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
index 4bb5698d3d..fe8938e282 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
@@ -21,15 +21,15 @@
 					<#assign groupNameHtmlId = "${i18n().properties}" >
 				</#if>
 				<#if tabCount = 1 >
-                    <li data-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" class="active" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#">${groupName?capitalize}</a></li>
+                    <li data-bs-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" class="active" data-bs-target="#${groupNameHtmlId?replace("/","-")}Group" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#${groupNameHtmlId?replace("/","-")}Group">${groupName?capitalize}</a></li>
 					<#assign tabCount = 2>
 				<#else>
-                    <li data-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#">${groupName?capitalize}</a></li>
+                    <li data-bs-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" data-bs-target="#${groupNameHtmlId?replace("/","-")}Group" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#${groupNameHtmlId?replace("/","-")}Group">${groupName?capitalize}</a></li>
 				</#if>
 			</#if>
 		</#list>
 		<#if (propertyGroups.all?size > 1) >
-            <li id="viewAllTab" data-toggle="tab" groupName="viewAll" href="#viewAll"><a href="#">${i18n().view_all_capitalized}</a></li>
+            <li id="viewAllTab" data-bs-toggle="tab" groupName="viewAll" href="#viewAll"><a href="#">${i18n().view_all_capitalized}</a></li>
 		</#if>
         </ul>
     </div>
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
index 80b863bb7f..67072519ea 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
@@ -6,6 +6,7 @@ var i18nStrings = {
     allCapitalized: '${i18n().all_capitalized?js_string}',
 };
 </script>
+<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="${urls.base}/js/jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="${urls.base}/js/jquery-migrate-1.4.1.js"></script>
 <script type="text/javascript" src="${urls.base}/js/vitroUtils.js"></script>
@@ -20,11 +21,6 @@ var i18nStrings = {
 	$(document).ready(function(){
         $('#nav-wrapper').height($("#nav").height());
 
-		$('#nav').affix({
-			offset: {
-				top: $('header').height()
-			}
-		});
 
         $( window ).resize(function() {
             $('#nav-wrapper').height($("#nav").height());

From 03da66e4913c160e1e5777ce2a5d7abcf5dbce21 Mon Sep 17 00:00:00 2001
From: milospp <misa01523@gmail.com>
Date: Tue, 13 Feb 2024 20:51:58 +0100
Subject: [PATCH 05/23] Fixed tooltip design

---
 .../src/main/webapp/themes/nemo/css/theme.css | 30 ++++++++++++++++++-
 .../themes/tenderfoot/css/tenderfoot.css      | 21 ++++++++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/webapp/src/main/webapp/themes/nemo/css/theme.css b/webapp/src/main/webapp/themes/nemo/css/theme.css
index 73784d643d..a9b1105b12 100644
--- a/webapp/src/main/webapp/themes/nemo/css/theme.css
+++ b/webapp/src/main/webapp/themes/nemo/css/theme.css
@@ -283,6 +283,19 @@ These are helper classes to add margin gaps where needed
   text-align: left;
   border-radius: 0;
   color: #333;
+  max-width: initial;
+}
+
+.vivoTooltip > .tooltip-inner #uriLink {
+  width: 350px;
+}
+
+.vivoTooltip > .tooltip-inner .close-footer {
+  display: flex;
+}
+
+.vivoTooltip > .tooltip-inner .close-footer a.close {
+  margin-left: auto;
 }
 
 .vivoTooltip > .tooltip-inner h5 {
@@ -311,4 +324,19 @@ These are helper classes to add margin gaps where needed
   padding: 20px 22px;
   text-align: left;
   line-height: 12px;
-} 
\ No newline at end of file
+} 
+
+
+/*  */
+
+#filter-groups .tab-content .tab-pane.active:not(.show) {
+  opacity: 0;
+}
+
+#filter-groups .tab-content .tab-pane.show:not(.active) {
+  opacity: 0;
+}
+
+.fade.in:not(.active) {
+  display: none;
+}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index f34528f052..be92057971 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -385,6 +385,14 @@ img.add-individual {
     max-width: initial;
   }
   
+  .vivoTooltip > .tooltip-inner .close-footer {
+        display: flex;
+  }
+    
+  .vivoTooltip > .tooltip-inner .close-footer a.close {
+        margin-left: auto;
+  }
+
   .vivoTooltip > .tooltip-inner h5 {
     padding-bottom: 0;
   }
@@ -411,4 +419,15 @@ img.add-individual {
     padding: 20px 22px;
     text-align: left;
     line-height: 12px;
-  } 
\ No newline at end of file
+  } 
+
+  span#qrCodeImage {
+    top: 23px;
+    right: 25px;
+    left: initial !important;
+  }
+
+  .show {
+    display: block !important;
+    opacity: 1;
+  }
\ No newline at end of file

From 10c0a9eb1942cec006c8b76972e1b3aedf9a43f4 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Mon, 18 Nov 2024 17:20:30 +0100
Subject: [PATCH 06/23] Moved the repeated inline style to the class

---
 .../main/webapp/css/visualization/mapofscience/layout.css | 5 +++++
 .../js/visualization/mapofscience/VisCommonControl.js     | 8 ++++----
 webapp/src/main/webapp/themes/nemo/css/layout.css         | 5 +++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/webapp/src/main/webapp/css/visualization/mapofscience/layout.css b/webapp/src/main/webapp/css/visualization/mapofscience/layout.css
index 16d139da61..7267f874de 100644
--- a/webapp/src/main/webapp/css/visualization/mapofscience/layout.css
+++ b/webapp/src/main/webapp/css/visualization/mapofscience/layout.css
@@ -271,6 +271,11 @@ a.map-of-science-links {
     color: #2485AE;
 }
 
+.visCommonControllTooltip {
+    padding: 16px 22px;
+    max-width: 400px;
+}
+
 /* -------------------------------------------------------------->  */
 /* SPECIAL STYLES FOR THE error  */
 /* -------------------------------------------------------------->  */
diff --git a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
index 27d4c149b7..828992fa06 100644
--- a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
+++ b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
@@ -89,7 +89,7 @@ function initGlobalToolTips() {
 		{
 			querySelector: "#imageIconOne",
 			data: {
-				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#toolTipOne').html() + "</div>",
+				title: "<div class='visCommonControllTooltip'>" + $('#toolTipOne').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
 				sanitize: false,
@@ -98,7 +98,7 @@ function initGlobalToolTips() {
 		},{
 			querySelector: "#exploreInfoIcon",
 			data: {
-				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#exploreTooltipText').html() + "</div>",
+				title: "<div class='visCommonControllTooltip'>" + $('#exploreTooltipText').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
 				sanitize: false,
@@ -107,7 +107,7 @@ function initGlobalToolTips() {
 		},{
 			querySelector: "#compareInfoIcon",
 			data: {
-				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#compareTooltipText').html() + "</div>",
+				title: "<div class='visCommonControllTooltip'>" + $('#compareTooltipText').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
 				sanitize: false,
@@ -116,7 +116,7 @@ function initGlobalToolTips() {
 		},{
 			querySelector: "#imageIconThree",
 			data: {
-				title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#toolTipThree').html() + "</div>",
+				title: "<div class='visCommonControllTooltip'>" + $('#toolTipThree').html() + "</div>",
 				customClass: "vivoTooltip vivoTooltip-yellow",
 				html: true,
 				sanitize: false,
diff --git a/webapp/src/main/webapp/themes/nemo/css/layout.css b/webapp/src/main/webapp/themes/nemo/css/layout.css
index d0e71a0d59..0798177892 100644
--- a/webapp/src/main/webapp/themes/nemo/css/layout.css
+++ b/webapp/src/main/webapp/themes/nemo/css/layout.css
@@ -273,6 +273,11 @@ a.map-of-science-links {
     color: #2485AE;
 }
 
+.visCommonControllTooltip {
+    padding: 16px 22px;
+    max-width: 400px;
+}
+
 /* -------------------------------------------------------------->  */
 /* SPECIAL STYLES FOR THE error  */
 /* -------------------------------------------------------------->  */

From 764eb2c77c7bf69443120d35084a97c1fad07c40 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 19 Nov 2024 13:29:55 +0100
Subject: [PATCH 07/23] Removed !important tags

---
 .../src/main/webapp/themes/nemo/css/theme.css | 14 ++++++-----
 .../themes/tenderfoot/css/tenderfoot.css      | 23 ++++++++++++-------
 .../individual/individual--foaf-person.ftl    |  8 ++++---
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/webapp/src/main/webapp/themes/nemo/css/theme.css b/webapp/src/main/webapp/themes/nemo/css/theme.css
index a9b1105b12..54f7246193 100644
--- a/webapp/src/main/webapp/themes/nemo/css/theme.css
+++ b/webapp/src/main/webapp/themes/nemo/css/theme.css
@@ -273,8 +273,8 @@ These are helper classes to add margin gaps where needed
 /* TOOLTIP  ---------------------------------------->  */
 /* ------------------------------------------------->  */
 .vivoTooltip {
-  opacity: 1 !important;
-  --bs-tooltip-max-width: 400px !important;
+  opacity: 1;
+  max-width: 400px;
 }
 
 .vivoTooltip > .tooltip-inner {
@@ -310,12 +310,14 @@ These are helper classes to add margin gaps where needed
   color: unset;
 }
 
-.downloadTip {
-  --bs-tooltip-max-width: 600px !important;
+div.vivoTooltip.downloadTip {
+  max-width: 600px;
+  --bs-tooltip-max-width: 600px;
 }
 
-.vivoTooltip-yellow {
-  --bs-tooltip-max-width: 500px !important;
+div.vivoTooltip.vivoTooltip-yellow {
+  max-width: 500px;
+  --bs-tooltip-max-width: 500px;
 }
 
 .vivoTooltip-yellow > .tooltip-inner {
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index be92057971..f291a4a695 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -372,8 +372,8 @@ img.add-individual {
 /* TOOLTIP  ---------------------------------------->  */
 /* ------------------------------------------------->  */
 .vivoTooltip {
-    opacity: 1 !important;
-    --bs-tooltip-max-width: 400px !important;
+    opacity: 1;
+    max-width: 400px;
   }
   
   .vivoTooltip > .tooltip-inner {
@@ -405,12 +405,14 @@ img.add-individual {
     color: unset;
   }
   
-  .downloadTip {
-    --bs-tooltip-max-width: 600px !important;
+  div.vivoTooltip.downloadTip {
+    max-width: 600px;
+    --bs-tooltip-max-width: 600px;
   }
   
-  .vivoTooltip-yellow {
-    --bs-tooltip-max-width: 500px !important;
+  div.vivoTooltip.vivoTooltip-yellow {
+    max-width: 500px;
+    --bs-tooltip-max-width: 500px;
   }
   
   .vivoTooltip-yellow > .tooltip-inner {
@@ -421,10 +423,15 @@ img.add-individual {
     line-height: 12px;
   } 
 
-  span#qrCodeImage {
+  #qrCodeContainer {
+    position: absolute;
+    right: 380px;
+  }
+
+  span#qrCodeImage.bottomLeftAnchor {
     top: 23px;
     right: 25px;
-    left: initial !important;
+    left: initial;
   }
 
   .show {
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
index 3e2a094143..0fa0aef15d 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
@@ -57,9 +57,11 @@
 						<img id="uriIcon" title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}"/>
 						<#if checkNamesResult?has_content >
 							<img id="qrIcon"  src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" />
-								<span id="qrCodeImage" class="hidden">${qrCodeLinkedImage!}
-									<a class="qrCloseLink" href="#"  title="${i18n().qr_code}">${i18n().close_capitalized}</a>
-								</span>
+								<div id="qrCodeContainer">
+									<span id="qrCodeImage" class="bottomLeftAnchor hidden">${qrCodeLinkedImage!}
+										<a class="qrCloseLink" href="#"  title="${i18n().qr_code}">${i18n().close_capitalized}</a>
+									</span>
+								</div>
 						</#if>
 					</span>
 					<section class="vcard person">

From 8b7067d3440efadff0f1232ea1d6c3d0e4f36c64 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 19 Nov 2024 13:41:02 +0100
Subject: [PATCH 08/23] Removed !important in .show class

---
 webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index f291a4a695..b7e80fdf3c 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -435,6 +435,6 @@ img.add-individual {
   }
 
   .show {
-    display: block !important;
+    display: block;
     opacity: 1;
   }
\ No newline at end of file

From 6356b6242914c673a871f23b98634efba21cac08 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 19 Nov 2024 16:42:54 +0100
Subject: [PATCH 09/23] Created tooltip css for everytheme to reduce reduntant
 code

---
 .../src/main/webapp/themes/nemo/css/theme.css | 21 ++---
 .../themes/nemo/templates/stylesheets.ftl     |  1 +
 .../themes/tenderfoot/css/tenderfoot.css      | 76 ++++++++++---------
 3 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/webapp/src/main/webapp/themes/nemo/css/theme.css b/webapp/src/main/webapp/themes/nemo/css/theme.css
index 54f7246193..c1bca7b42f 100644
--- a/webapp/src/main/webapp/themes/nemo/css/theme.css
+++ b/webapp/src/main/webapp/themes/nemo/css/theme.css
@@ -272,12 +272,12 @@ These are helper classes to add margin gaps where needed
 /* ------------------------------------------------->  */
 /* TOOLTIP  ---------------------------------------->  */
 /* ------------------------------------------------->  */
-.vivoTooltip {
+/* .vivoTooltip {
   opacity: 1;
   max-width: 400px;
 }
 
-.vivoTooltip > .tooltip-inner {
+.vivoTooltip>.tooltip-inner {
   background-color: #f1f2ee;
   border: 1px solid #F1D031;
   text-align: left;
@@ -286,27 +286,28 @@ These are helper classes to add margin gaps where needed
   max-width: initial;
 }
 
-.vivoTooltip > .tooltip-inner #uriLink {
+.vivoTooltip>.tooltip-inner #uriLink {
   width: 350px;
 }
 
-.vivoTooltip > .tooltip-inner .close-footer {
+.vivoTooltip>.tooltip-inner .close-footer {
   display: flex;
 }
 
-.vivoTooltip > .tooltip-inner .close-footer a.close {
+.vivoTooltip>.tooltip-inner .close-footer a.close {
   margin-left: auto;
 }
 
-.vivoTooltip > .tooltip-inner h5 {
+.vivoTooltip>.tooltip-inner h5 {
   padding-bottom: 0;
 }
 
-.vivoTooltip > .tooltip-arrow::before {
+.vivoTooltip>.tooltip-arrow::before {
   --bs-tooltip-bg: #F1D031;
 }
 
-.tooltip:not(.vivoTooltip) > .tooltip-inner, .tooltip:not(.vivoTooltip) > .tooltip-inner * {
+.tooltip:not(.vivoTooltip)>.tooltip-inner,
+.tooltip:not(.vivoTooltip)>.tooltip-inner * {
   color: unset;
 }
 
@@ -320,13 +321,13 @@ div.vivoTooltip.vivoTooltip-yellow {
   --bs-tooltip-max-width: 500px;
 }
 
-.vivoTooltip-yellow > .tooltip-inner {
+.vivoTooltip-yellow>.tooltip-inner {
   background-color: #ffffc0;
   font-size: 0.8em;
   padding: 20px 22px;
   text-align: left;
   line-height: 12px;
-} 
+} */
 
 
 /*  */
diff --git a/webapp/src/main/webapp/themes/nemo/templates/stylesheets.ftl b/webapp/src/main/webapp/themes/nemo/templates/stylesheets.ftl
index cd075e5c20..7411cd70b3 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/stylesheets.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/stylesheets.ftl
@@ -4,6 +4,7 @@
 
 <!-- vitro base styles (application-wide) -->
 <#-- <link rel="stylesheet" href="${urls.base}/css/vitro.css" /> -->
+<link rel="stylesheet" href="${urls.base}/css/tooltip.css" />
 
 
 <!-- <link rel="stylesheet" href="${urls.theme}/css/bootstrap.min.css" /> -->
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index b7e80fdf3c..6c5011b1ac 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -371,70 +371,74 @@ img.add-individual {
 /* ------------------------------------------------->  */
 /* TOOLTIP  ---------------------------------------->  */
 /* ------------------------------------------------->  */
+/* 
 .vivoTooltip {
     opacity: 1;
+    --bs-tooltip-opacity: 1;
     max-width: 400px;
-  }
-  
-  .vivoTooltip > .tooltip-inner {
+    --bs-tooltip-max-width: 400px;
+}
+
+.vivoTooltip>.tooltip-inner {
     background-color: #f1f2ee;
     border: 1px solid #F1D031;
     text-align: left;
     border-radius: 0;
     color: #333;
     max-width: initial;
-  }
-  
-  .vivoTooltip > .tooltip-inner .close-footer {
-        display: flex;
-  }
-    
-  .vivoTooltip > .tooltip-inner .close-footer a.close {
-        margin-left: auto;
-  }
-
-  .vivoTooltip > .tooltip-inner h5 {
+}
+
+.vivoTooltip>.tooltip-inner .close-footer {
+    display: flex;
+}
+
+.vivoTooltip>.tooltip-inner .close-footer a.close {
+    margin-left: auto;
+}
+
+.vivoTooltip>.tooltip-inner h5 {
     padding-bottom: 0;
-  }
-  
-  .vivoTooltip > .tooltip-arrow::before {
+}
+
+.vivoTooltip>.tooltip-arrow::before {
     --bs-tooltip-bg: #F1D031;
-  }
-  
-  .tooltip:not(.vivoTooltip) > .tooltip-inner, .tooltip:not(.vivoTooltip) > .tooltip-inner * {
+}
+
+.tooltip:not(.vivoTooltip)>.tooltip-inner,
+.tooltip:not(.vivoTooltip)>.tooltip-inner * {
     color: unset;
-  }
-  
-  div.vivoTooltip.downloadTip {
+}
+
+div.vivoTooltip.downloadTip {
     max-width: 600px;
     --bs-tooltip-max-width: 600px;
-  }
-  
-  div.vivoTooltip.vivoTooltip-yellow {
+}
+
+div.vivoTooltip.vivoTooltip-yellow {
     max-width: 500px;
     --bs-tooltip-max-width: 500px;
-  }
-  
-  .vivoTooltip-yellow > .tooltip-inner {
+}
+
+.vivoTooltip-yellow>.tooltip-inner {
     background-color: #ffffc0;
     font-size: 0.8em;
     padding: 20px 22px;
     text-align: left;
     line-height: 12px;
-  } 
+} */
 
-  #qrCodeContainer {
+#qrCodeContainer {
     position: absolute;
     right: 380px;
-  }
+}
 
-  span#qrCodeImage.bottomLeftAnchor {
+span#qrCodeImage.bottomLeftAnchor {
     top: 23px;
     right: 25px;
     left: initial;
-  }
+}
 
-  .show {
+.show {
     display: block;
     opacity: 1;
-  }
\ No newline at end of file
+} 
\ No newline at end of file

From 612589f5a7cbe5085a783137f1bc6ab6e2f84894 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 19 Nov 2024 16:52:18 +0100
Subject: [PATCH 10/23] Refactored code

---
 .../src/main/webapp/themes/nemo/css/theme.css | 65 +------------------
 .../themes/tenderfoot/css/tenderfoot.css      | 57 +---------------
 2 files changed, 2 insertions(+), 120 deletions(-)

diff --git a/webapp/src/main/webapp/themes/nemo/css/theme.css b/webapp/src/main/webapp/themes/nemo/css/theme.css
index c1bca7b42f..1f5da1f97c 100644
--- a/webapp/src/main/webapp/themes/nemo/css/theme.css
+++ b/webapp/src/main/webapp/themes/nemo/css/theme.css
@@ -269,69 +269,6 @@ These are helper classes to add margin gaps where needed
 	
 }
 
-/* ------------------------------------------------->  */
-/* TOOLTIP  ---------------------------------------->  */
-/* ------------------------------------------------->  */
-/* .vivoTooltip {
-  opacity: 1;
-  max-width: 400px;
-}
-
-.vivoTooltip>.tooltip-inner {
-  background-color: #f1f2ee;
-  border: 1px solid #F1D031;
-  text-align: left;
-  border-radius: 0;
-  color: #333;
-  max-width: initial;
-}
-
-.vivoTooltip>.tooltip-inner #uriLink {
-  width: 350px;
-}
-
-.vivoTooltip>.tooltip-inner .close-footer {
-  display: flex;
-}
-
-.vivoTooltip>.tooltip-inner .close-footer a.close {
-  margin-left: auto;
-}
-
-.vivoTooltip>.tooltip-inner h5 {
-  padding-bottom: 0;
-}
-
-.vivoTooltip>.tooltip-arrow::before {
-  --bs-tooltip-bg: #F1D031;
-}
-
-.tooltip:not(.vivoTooltip)>.tooltip-inner,
-.tooltip:not(.vivoTooltip)>.tooltip-inner * {
-  color: unset;
-}
-
-div.vivoTooltip.downloadTip {
-  max-width: 600px;
-  --bs-tooltip-max-width: 600px;
-}
-
-div.vivoTooltip.vivoTooltip-yellow {
-  max-width: 500px;
-  --bs-tooltip-max-width: 500px;
-}
-
-.vivoTooltip-yellow>.tooltip-inner {
-  background-color: #ffffc0;
-  font-size: 0.8em;
-  padding: 20px 22px;
-  text-align: left;
-  line-height: 12px;
-} */
-
-
-/*  */
-
 #filter-groups .tab-content .tab-pane.active:not(.show) {
   opacity: 0;
 }
@@ -342,4 +279,4 @@ div.vivoTooltip.vivoTooltip-yellow {
 
 .fade.in:not(.active) {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index 6c5011b1ac..ff2539632f 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -371,61 +371,6 @@ img.add-individual {
 /* ------------------------------------------------->  */
 /* TOOLTIP  ---------------------------------------->  */
 /* ------------------------------------------------->  */
-/* 
-.vivoTooltip {
-    opacity: 1;
-    --bs-tooltip-opacity: 1;
-    max-width: 400px;
-    --bs-tooltip-max-width: 400px;
-}
-
-.vivoTooltip>.tooltip-inner {
-    background-color: #f1f2ee;
-    border: 1px solid #F1D031;
-    text-align: left;
-    border-radius: 0;
-    color: #333;
-    max-width: initial;
-}
-
-.vivoTooltip>.tooltip-inner .close-footer {
-    display: flex;
-}
-
-.vivoTooltip>.tooltip-inner .close-footer a.close {
-    margin-left: auto;
-}
-
-.vivoTooltip>.tooltip-inner h5 {
-    padding-bottom: 0;
-}
-
-.vivoTooltip>.tooltip-arrow::before {
-    --bs-tooltip-bg: #F1D031;
-}
-
-.tooltip:not(.vivoTooltip)>.tooltip-inner,
-.tooltip:not(.vivoTooltip)>.tooltip-inner * {
-    color: unset;
-}
-
-div.vivoTooltip.downloadTip {
-    max-width: 600px;
-    --bs-tooltip-max-width: 600px;
-}
-
-div.vivoTooltip.vivoTooltip-yellow {
-    max-width: 500px;
-    --bs-tooltip-max-width: 500px;
-}
-
-.vivoTooltip-yellow>.tooltip-inner {
-    background-color: #ffffc0;
-    font-size: 0.8em;
-    padding: 20px 22px;
-    text-align: left;
-    line-height: 12px;
-} */
 
 #qrCodeContainer {
     position: absolute;
@@ -441,4 +386,4 @@ span#qrCodeImage.bottomLeftAnchor {
 .show {
     display: block;
     opacity: 1;
-} 
\ No newline at end of file
+}

From d4526535bb43b7c46dd98f70dac9a1a0c6ea07c9 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Wed, 20 Nov 2024 01:12:27 +0100
Subject: [PATCH 11/23] Renaming vivoTooltip to vitroTooltip

---
 .../main/webapp/js/individual/individualTooltipBubble.js  | 6 +++---
 .../js/visualization/mapofscience/VisCommonControl.js     | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
index 266402110c..1cfce2265f 100644
--- a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
+++ b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
@@ -13,7 +13,7 @@ $(document).ready(function(){
                 title: "<div>" + i18nStrings.researchAreaTooltipOne + "</div><div>" + i18nStrings.researchAreaTooltipTwo + "</div>",
                 html: true,
                 fallbackPlacements: ['bottom', 'left', 'top', 'right'],
-				customClass: "vivoTooltip"
+				customClass: "vitroTooltip"
             }
         },
         {
@@ -22,7 +22,7 @@ $(document).ready(function(){
                 title: i18nStrings.quickviewTooltip,
                 html: true,
                 fallbackPlacements: ['bottom', 'left', 'top', 'right'],
-				customClass: "vivoTooltip"
+				customClass: "vitroTooltip"
             }
         },
         {
@@ -31,7 +31,7 @@ $(document).ready(function(){
                 title: "<div>" + i18nStrings.standardviewTooltipOne + '</div><div>' + i18nStrings.standardviewTooltipTwo + "</div>",
                 html: true,
                 fallbackPlacements: ['bottom', 'left', 'top', 'right'],
-				customClass: "vivoTooltip"
+				customClass: "vitroTooltip"
             }
         },
     ]
diff --git a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
index 828992fa06..852e2fed0c 100644
--- a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
+++ b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
@@ -90,7 +90,7 @@ function initGlobalToolTips() {
 			querySelector: "#imageIconOne",
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#toolTipOne').html() + "</div>",
-				customClass: "vivoTooltip vivoTooltip-yellow",
+				customClass: "vitroTooltip vitroTooltip-yellow",
 				html: true,
 				sanitize: false,
 				fallbackPlacements: ['right', 'bottom', 'top', 'left']
@@ -99,7 +99,7 @@ function initGlobalToolTips() {
 			querySelector: "#exploreInfoIcon",
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#exploreTooltipText').html() + "</div>",
-				customClass: "vivoTooltip vivoTooltip-yellow",
+				customClass: "vitroTooltip vitroTooltip-yellow",
 				html: true,
 				sanitize: false,
 				fallbackPlacements: ['right', 'bottom', 'top', 'left']
@@ -108,7 +108,7 @@ function initGlobalToolTips() {
 			querySelector: "#compareInfoIcon",
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#compareTooltipText').html() + "</div>",
-				customClass: "vivoTooltip vivoTooltip-yellow",
+				customClass: "vitroTooltip vitroTooltip-yellow",
 				html: true,
 				sanitize: false,
 				fallbackPlacements: ['right', 'bottom', 'top', 'left']
@@ -117,7 +117,7 @@ function initGlobalToolTips() {
 			querySelector: "#imageIconThree",
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#toolTipThree').html() + "</div>",
-				customClass: "vivoTooltip vivoTooltip-yellow",
+				customClass: "vitroTooltip vitroTooltip-yellow",
 				html: true,
 				sanitize: false,
 				fallbackPlacements: ['left', 'bottom', 'top', 'right']

From 6d1aee57acaed4232af3eae856eaef86ebc2c6ff Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Sun, 8 Dec 2024 22:23:39 +0100
Subject: [PATCH 12/23] Removed bootstrap

---
 .../body/individual/individual--foaf-person-2column.ftl          | 1 -
 .../visualization/mapOfScience/mapOfScienceStandalone.ftl        | 1 -
 .../src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl  | 1 -
 3 files changed, 3 deletions(-)

diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index 80108aede9..a7c22b3f71 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -199,7 +199,6 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
                   
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
index df47dfdcf6..0398383ac3 100644
--- a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
@@ -91,4 +91,3 @@ ${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
index e0d9a02080..e910020c91 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
@@ -148,4 +148,3 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}

From a84b1c8c97e532b39a0a09ad84162524f68ada4c Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 10 Dec 2024 10:05:28 +0100
Subject: [PATCH 13/23] excluded bootstrap from popper

---
 .../js/individual/individualTooltipBubble.js     |  9 +++------
 .../mapofscience/VisCommonControl.js             | 16 ++++------------
 webapp/src/main/webapp/themes/nemo/css/theme.css | 12 ------------
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
index 1cfce2265f..5adfe0e937 100644
--- a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
+++ b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
@@ -11,8 +11,7 @@ $(document).ready(function(){
             querySelector: "#researchAreaIcon",
             data: {
                 title: "<div>" + i18nStrings.researchAreaTooltipOne + "</div><div>" + i18nStrings.researchAreaTooltipTwo + "</div>",
-                html: true,
-                fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+                placements: ['top', 'right', 'bottom', 'left'],
 				customClass: "vitroTooltip"
             }
         },
@@ -20,8 +19,7 @@ $(document).ready(function(){
             querySelector: "#fullViewIcon",
             data: {
                 title: i18nStrings.quickviewTooltip,
-                html: true,
-                fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+                placements: ['top', 'right', 'bottom', 'left'],
 				customClass: "vitroTooltip"
             }
         },
@@ -29,8 +27,7 @@ $(document).ready(function(){
             querySelector: "#quickViewIcon",
             data: {
                 title: "<div>" + i18nStrings.standardviewTooltipOne + '</div><div>' + i18nStrings.standardviewTooltipTwo + "</div>",
-                html: true,
-                fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+                placements: ['top', 'right', 'bottom', 'left'],
 				customClass: "vitroTooltip"
             }
         },
diff --git a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
index 852e2fed0c..3af81c9309 100644
--- a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
+++ b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
@@ -91,36 +91,28 @@ function initGlobalToolTips() {
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#toolTipOne').html() + "</div>",
 				customClass: "vitroTooltip vitroTooltip-yellow",
-				html: true,
-				sanitize: false,
-				fallbackPlacements: ['right', 'bottom', 'top', 'left']
+				placements: ['left', 'top', 'bottom', 'right']
 			}
 		},{
 			querySelector: "#exploreInfoIcon",
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#exploreTooltipText').html() + "</div>",
 				customClass: "vitroTooltip vitroTooltip-yellow",
-				html: true,
-				sanitize: false,
-				fallbackPlacements: ['right', 'bottom', 'top', 'left']
+				placements: ['left', 'top', 'bottom', 'right']
 			}
 		},{
 			querySelector: "#compareInfoIcon",
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#compareTooltipText').html() + "</div>",
 				customClass: "vitroTooltip vitroTooltip-yellow",
-				html: true,
-				sanitize: false,
-				fallbackPlacements: ['right', 'bottom', 'top', 'left']
+				placements: ['left', 'top', 'bottom', 'right']
 			}
 		},{
 			querySelector: "#imageIconThree",
 			data: {
 				title: "<div class='visCommonControllTooltip'>" + $('#toolTipThree').html() + "</div>",
 				customClass: "vitroTooltip vitroTooltip-yellow",
-				html: true,
-				sanitize: false,
-				fallbackPlacements: ['left', 'bottom', 'top', 'right']
+				placements: ['left', 'top', 'bottom', 'right']
 			}
 		},
 	]
diff --git a/webapp/src/main/webapp/themes/nemo/css/theme.css b/webapp/src/main/webapp/themes/nemo/css/theme.css
index 1f5da1f97c..f839279f1d 100644
--- a/webapp/src/main/webapp/themes/nemo/css/theme.css
+++ b/webapp/src/main/webapp/themes/nemo/css/theme.css
@@ -268,15 +268,3 @@ These are helper classes to add margin gaps where needed
 .input-group-header-search {
 	
 }
-
-#filter-groups .tab-content .tab-pane.active:not(.show) {
-  opacity: 0;
-}
-
-#filter-groups .tab-content .tab-pane.show:not(.active) {
-  opacity: 0;
-}
-
-.fade.in:not(.active) {
-  display: none;
-}

From a5570c571d658d6142ea3fc3061cdd9831dc2ca4 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 10 Dec 2024 10:16:10 +0100
Subject: [PATCH 14/23] Revert wilma changes

---
 .../main/webapp/themes/wilma/css/wilma.css    | 393 +-----------------
 1 file changed, 3 insertions(+), 390 deletions(-)

diff --git a/webapp/src/main/webapp/themes/wilma/css/wilma.css b/webapp/src/main/webapp/themes/wilma/css/wilma.css
index cd6e5edcb6..0a7c4fdb26 100644
--- a/webapp/src/main/webapp/themes/wilma/css/wilma.css
+++ b/webapp/src/main/webapp/themes/wilma/css/wilma.css
@@ -98,7 +98,6 @@ input.block {
 label {
     margin-top: .5em;
     margin-bottom: .5em;
-    display: block;
 }
 label.inline {
     display: inline;
@@ -241,23 +240,9 @@ p.submit {
 .editingForm table {
     border-color: #dfe6e6;
 }
-
-.editingForm > table > tbody > tr > td.verticalfieldlabel {
+.editingForm td {
     padding: 3px;
 }
-
-.editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
-    width: 40%;
-}
-
-
-@media (min-width: 768px) {
-    .editingForm > table > tbody > tr > td.verticalfieldlabel:first-child {
-        width: 15%;
-    }
-}
-
-
 .editingForm .entryFormHead {
     background-color: #f1f2ee;
     border-color: #dfe6e6;
@@ -623,14 +608,13 @@ ul.individual-urls-people li a {
 /* LOG IN------>  */
 #login {
     float: right;
-    max-width: 332px;
+    width: 314px;
     border: 1px solid #e8ece9;
     margin-right: 25px;
     padding-bottom: 30px;
     margin-bottom: 30px;
     overflow: hidden;
-    margin-top: 30px;
-    padding: 15px;
+    margin-top: 20px;
 }
 body.login #login {
     float: none;
@@ -665,11 +649,6 @@ h3.internal-auth:hover {
     color: #a12424;
     padding-top: 5px;
 }
-
-#login-form > div {
-    padding: 10px 28px;
-}
-
 #login-form label {
     display: block;
     color: #5e6363;
@@ -764,7 +743,6 @@ p.password-note {
     margin-top: -10px;
     margin-right:-10px;
     height:34px;
-    padding: 10px;
 }
 p.external-auth {
     margin: 0 auto;
@@ -1581,7 +1559,6 @@ p.address-line {
 /* ------------------------------------------------->  */
 /* SITE ADMIN DASHBOARD ---------------------------->  */
 /* ------------------------------------------------->  */
-
 #adminDashboard .pageBodyGroup {
   padding: 0 1em .5em 1em;
 }
@@ -1756,367 +1733,3 @@ span.subclassExpandMinus {
     background:url(../images/green_minus_sign.gif) right center no-repeat;
     min-height:18px;
 }
-
-/* ------------------------------------------------->  */
-/* CAPABILITY MAP  --------------------------------->  */
-/* ------------------------------------------------->  */
-
-#wrapper-content #main-content #container {
-    width: initial !important;
-    margin-left: initial !important;
-}
-
-#helptext {
-    width: 100%;
-}
-
-
-#right-container {
-    width: 100%;
-    position: relative;
-    float: left;
-}
-
-.tabs {
-    width: 100%;
-}
-
-.tabs ul.titles li a, .tabs ul.titles li a{
-    width: 50%;
-}
-
-#center-container {
-    position: relative;
-    width: 100% !important;
-}
-
-@media (min-width: 768px) {
-    #adminDashboard .pageBodyGroup {
-        flex: 0 0 auto;
-        width: 50%;
-    }
-
-    #right-container {
-        width: 30%;
-        position: absolute;
-    }
-
-    #helptext {
-        width: 70%;
-        padding-right: 10px;
-    }
-
-    #center-container {
-        position: absolute;
-    }
-    
-}
-
-#cutofflabel {
-    width: initial;
-}
-
-#queryform input[type="text"], select, input[type="password"]{
-    max-width: 100%;
-}
-
-#queryCutoff {
-    margin-left: -54px;
-}
-
-#infovis {
-    width: 100% !important;
-}
-
-#infovis > svg {
-    width: 100% !important;
-}
-
-/* Author Network */
-
-.propertyTabsList {
-    display: flex;
-}
-
-#body {
-    min-width: initial;
-}
-
-#chord {
-    width: 100%;
-    float: left !important;
-    overflow: auto;
-}
-
-
-#chord > svg {
-    transform-origin: 0 50%;
-    -webkit-transform-origin: 0 50%;
-    -ms-transform-origin: 0 50%;
-    transform-origin: 0 50%;
-}
-
-@media (max-width: 360px) {
-    #chord > svg {
-        scale: 0.3;
-    }
-    
-    #chord-info-div {
-        scale: 0.7;
-    }
-}
-
-@media (min-width: 361px) and (max-width: 399px) {
-    #chord > svg {
-        scale: 0.4;
-    }
-    
-    #chord-info-div {
-        scale: 0.7;
-    }
-}
-
-
-@media (min-width: 400px) and (max-width: 449px) {
-    #chord > svg {
-        scale: 0.44;
-    }
-    
-    #chord-info-div {
-        scale: 0.7;
-    }
-}
-
-
-
-@media (min-width: 450px) and (max-width: 499px) {
-    #chord > svg {
-        scale: 0.5;
-    }
-    
-    #chord-info-div {
-        scale: 0.7;
-    }
-}
-
-
-
-@media (min-width: 500px) and (max-width: 575px) {
-    #chord > svg {
-        scale: 0.55;
-    }
-    
-    #chord-info-div {
-        scale: 0.8;
-    }
-}
-
-@media (min-width: 576px) and (max-width: 767px) {
-    #chord > svg {
-        scale: 0.6;
-    }
-}
-
-
-@media (min-width: 768px) and (max-width: 991px) {
-    #chord > svg {
-        scale: 0.8;
-    }
-}
-
-
-
-#sparkline-container-full > #publication-count-sparkline-include {
-    width: 100%;
-    margin-bottom: 0px;
-}
-
-
-#sparkline-container-full > #coauthor-count-sparkline-include {
-    width: 100%;
-    margin-bottom: 0px;
-}
-
-#sparkline-container-full .google-visualization-sparkline-default img.google-visualization-sparkline-image {
-    max-width: 100%;
-}
-
-
-#body .vis-tables {
-    width: 100%;
-    margin-bottom: 0px;
-}
-
-@media (min-width: 768px) {
-    #sparkline-container-full > #publication-count-sparkline-include {
-        width: 50%;
-        margin-bottom: 15px;
-    }
-    #sparkline-container-full > #coauthor-count-sparkline-include {
-        width: 50%;
-        margin-bottom: 15px;
-    }
-    #body .vis-tables {
-        width: 48%;
-        margin-bottom: 15px;
-    }
-}
-
-#graphContainer {
-    width: 100%;
-    position: relative;
-    overflow-x: auto;
-    height: 100%;
-}
-
-#leftblock {
-    width: 100%;
-}
-
-#rightblock {
-    width: 100%;
-    margin-right: 0;
-}
-
-@media (min-width: 768px) {
-    #leftblock {
-        width: 39%;
-    }
-    
-    #rightblock {
-        width: 54%;
-    }
-}
-
-#temporal-graph {
-    height: 100%;
-    overflow-x: auto;
-}
-
-#temporal-graph-response > .blockUI  {
-    width: 100%;
-    max-width: 420px;
-    left: 0;
-}
-
-
-.editingForm > table > tbody > tr {
-    text-wrap: wrap;
-    line-break: anywhere;
-    line-height: unset;
-}
-
-/* table.form-background tr td {
-    width: 100%;
-    display: block;
-} */
-
-#wrapper-content > div > div > div > div > table > tbody > tr > td > div > form > div {
-    display: flex;
-    flex-direction: column;
-}
-
-#wrapper-content  table > tbody > tr.header > td.verticalfieldlabel {
-    width: 100px;
-}
-
-#container section table tbody .subclassCell {
-    word-wrap: break-word;
-}
-
-table.classHierarchy {
-    min-width: initial;
-    max-width: initial;
-    width: calc(100% - 25);
-}
-
-section#container div {
-    width: initial;
-}
-
-section#container div {
-    width: initial;
-}
-
-#noLocalOntologyExists {
-    width: 100%;
-}
-
-#noLocalOntologyExists blockquote {
-    text-wrap: wrap;
-    word-break: break-word;
-}
-
-.proxy-profile {
-    width: 100%;
-}
-
-.proxy-profile .proxy {
-    width: 100%;
-}
-
-.proxy-profile .profile {
-    width: 100%;
-    padding-left: 0;
-}
-
-@media (min-width: 768px) {
-    .proxy-profile .proxy {
-        width: 50%;
-    }
-    
-    .proxy-profile .profile {
-        width: 50%;
-        padding-left: 12px;
-    }
-}
-
-ul.menuItems {
-    max-width: 300px;
-    width: initial;
-}
-
-section#floatRight {
-    width: initial;
-}
-
-#managePage #floatRight {
-    width: 100%;
-    float: unset;
-}
-
-#managePage #leftSide {
-    width: 100%;
-}
-
-@media (min-width: 768px) {
-    #managePage #floatRight {
-        width: initial;
-        float: right;
-    }
-    
-    #managePage #leftSide {
-        width: initial;
-    }
-}
-
-.customForm {
-    width: 100%;
-    overflow-x: auto;
-}
-
-.classHierarchy {
-    word-break: break-all;
-}
-
-#startup-trace h4, #startup-trace li{
-    overflow-wrap: anywhere;
-}
-
-#indexer {
-    overflow-x: auto;
-}
-
-form li {
-    overflow-wrap: break-word;
-}

From 486e5da40187d75b51c68c979002134dcf8d79b5 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 10 Dec 2024 10:53:42 +0100
Subject: [PATCH 15/23] Refactored code

---
 .../body/individual/individual--foaf-person-2column.ftl     | 3 +--
 .../body/individual/individual--foaf-person-quickview.ftl   | 3 +--
 .../visualization/mapOfScience/mapOfScienceStandalone.ftl   | 3 +--
 .../themes/nemo/templates/individual--foaf-person.ftl       | 3 +--
 .../themes/tenderfoot/js/propertyGroupControls-bootstrap.js | 2 +-
 .../templates/body/individual/individual--foaf-person.ftl   | 3 +--
 .../partials/individual/individual-property-group-tabs.ftl  | 6 +++---
 .../tenderfoot/templates/page/partials/headScripts.ftl      | 1 -
 8 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index a7c22b3f71..8b532b80de 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -188,8 +188,7 @@ var i18nStringsUriRdf = {
 };
 </script>
 
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/bootstrap-5.3.2/css/bootstrap.min.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-2column-view.css" />',
                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
index f3861e0dc9..2ed13c31b9 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
@@ -257,8 +257,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
-                  '<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
index 0398383ac3..b2b43676b7 100644
--- a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
@@ -86,8 +86,7 @@ corresponding changes in the included Templates. -->
 </div>
 
 
-${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/bootstrap-5.3.2/css/bootstrap.min.css" />')}
+${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />')}
 
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
diff --git a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
index b334fbae19..9ba7e81a2c 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
@@ -216,8 +216,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
 	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
 	'<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>')}
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
diff --git a/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js b/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
index 94700637c2..5be973429d 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
+++ b/webapp/src/main/webapp/themes/tenderfoot/js/propertyGroupControls-bootstrap.js
@@ -27,7 +27,7 @@ $(document).ready(function(){
         return false;
     });
     $(window).on('popstate', function () {
-        var anchor = location.hash || $('li[data-bs-toggle=\'tab\']').first().attr('href');
+        var anchor = location.hash || $('li[data-toggle=\'tab\']').first().attr('href');
         $('li[href=\'' + anchor + '\']').tab('show');
         if (anchor == "#viewAll") {
             showViewAll();
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
index 0fa0aef15d..e41bdc766f 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
@@ -189,8 +189,7 @@ ${headScripts.add(
 	'<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
-	'<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>'
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>'
  )}
 
 ${scripts.add(
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
index fe8938e282..4bb5698d3d 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/partials/individual/individual-property-group-tabs.ftl
@@ -21,15 +21,15 @@
 					<#assign groupNameHtmlId = "${i18n().properties}" >
 				</#if>
 				<#if tabCount = 1 >
-                    <li data-bs-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" class="active" data-bs-target="#${groupNameHtmlId?replace("/","-")}Group" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#${groupNameHtmlId?replace("/","-")}Group">${groupName?capitalize}</a></li>
+                    <li data-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" class="active" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#">${groupName?capitalize}</a></li>
 					<#assign tabCount = 2>
 				<#else>
-                    <li data-bs-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" data-bs-target="#${groupNameHtmlId?replace("/","-")}Group" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#${groupNameHtmlId?replace("/","-")}Group">${groupName?capitalize}</a></li>
+                    <li data-toggle="tab" groupName="${groupNameHtmlId?replace("/","-")}" href="#${groupNameHtmlId?replace("/","-")}Group"><a href="#">${groupName?capitalize}</a></li>
 				</#if>
 			</#if>
 		</#list>
 		<#if (propertyGroups.all?size > 1) >
-            <li id="viewAllTab" data-bs-toggle="tab" groupName="viewAll" href="#viewAll"><a href="#">${i18n().view_all_capitalized}</a></li>
+            <li id="viewAllTab" data-toggle="tab" groupName="viewAll" href="#viewAll"><a href="#">${i18n().view_all_capitalized}</a></li>
 		</#if>
         </ul>
     </div>
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
index 67072519ea..efb0e6c4c5 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
@@ -6,7 +6,6 @@ var i18nStrings = {
     allCapitalized: '${i18n().all_capitalized?js_string}',
 };
 </script>
-<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="${urls.base}/js/jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="${urls.base}/js/jquery-migrate-1.4.1.js"></script>
 <script type="text/javascript" src="${urls.base}/js/vitroUtils.js"></script>

From 699386edcf89402c6dc903c125eaeec97ced7752 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 10 Dec 2024 13:53:05 +0100
Subject: [PATCH 16/23] fix: Vitro theme bug

---
 .../body/individual/individual--foaf-person-2column.ftl      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index 8b532b80de..1baaf585fd 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -188,7 +188,8 @@ var i18nStringsUriRdf = {
 };
 </script>
 
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/bootstrap-5.3.2/css/bootstrap.min.css" />',
+                  '<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-2column-view.css" />',
                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}
@@ -197,7 +198,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
                   
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',

From 63466e5cdbe97b36e2cc3d9c8514aad98291ac6b Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 10 Dec 2024 14:05:12 +0100
Subject: [PATCH 17/23] Removed bootstrap 5 dependency

---
 .../src/main/webapp/js/individual/individualTooltipBubble.js   | 3 ---
 .../body/individual/individual--foaf-person-2column.ftl        | 3 +--
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
index 5adfe0e937..7cae7e202d 100644
--- a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
+++ b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
@@ -1,9 +1,6 @@
 /* $This file is distributed under the terms of the license in LICENSE$ */
 
 $(document).ready(function(){
-    // This function creates and styles the bootstrap-popper tooltip that displays the bubble text when the user hovers
-    // over the research area "group" icon.
-
     $.extend(this, i18nStrings);
 
     let tooltips = [
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index 1baaf585fd..5d2e46e9e4 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -188,8 +188,7 @@ var i18nStringsUriRdf = {
 };
 </script>
 
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/bootstrap-5.3.2/css/bootstrap.min.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
                   '<link rel="stylesheet" href="${urls.base}/css/individual/individual-2column-view.css" />',
                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />')}

From d0b57b6941eae411f07e68f4c8fee662cdc9b6ba Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 10 Dec 2024 16:13:58 +0100
Subject: [PATCH 18/23] Removed unrelated changes

---
 webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index ff2539632f..e845630708 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -8,8 +8,6 @@ legend {
 
 #nav {
     background: #f7f9f9;
-    position: sticky;
-    top: 0;
 }
 
 #nav.affix {

From 0e248f55de5a498eec00e884998c0eabb29900c3 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Wed, 11 Dec 2024 13:05:03 +0100
Subject: [PATCH 19/23] Migraiton popper to floating

---
 .../body/individual/individual--foaf-person-2column.ftl    | 6 ++++--
 .../body/individual/individual--foaf-person-quickview.ftl  | 6 ++++--
 .../visualization/mapOfScience/mapOfScienceStandalone.ftl  | 6 ++++--
 webapp/src/main/webapp/themes/nemo/templates/head.ftl      | 5 ++++-
 .../themes/nemo/templates/individual--foaf-person.ftl      | 7 +++++--
 .../webapp/themes/nemo/templates/mapOfScienceSetup.ftl     | 6 ++++--
 .../templates/body/individual/individual--foaf-person.ftl  | 6 ++++--
 webapp/src/main/webapp/themes/wilma/templates/head.ftl     | 3 ++-
 8 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
index 5d2e46e9e4..afda6a779a 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-2column.ftl
@@ -196,8 +196,10 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/indi
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
+                  
+                  '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>')}
                   
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
index 2ed13c31b9..143d04a246 100644
--- a/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/body/individual/individual--foaf-person-quickview.ftl
@@ -256,8 +256,10 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/
                   '<script type="text/javascript" src="${urls.base}/js/amplify/amplify.store.min.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/json2.js"></script>',
                   '<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
+                  
+                  '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>')}
 
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>',
               '<script async type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
index b2b43676b7..410ae4a28c 100644
--- a/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/visualization/mapOfScience/mapOfScienceStandalone.ftl
@@ -88,5 +88,7 @@ corresponding changes in the included Templates. -->
 
 ${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/visualization/visualization.css" />')}
 
-${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+${headScripts.add('<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>'
+                  )}
diff --git a/webapp/src/main/webapp/themes/nemo/templates/head.ftl b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
index 5e7386670b..90a567fbd6 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/head.ftl
@@ -19,8 +19,11 @@
                           '<script type="text/javascript" src="${urls.base}/js/openSocial/orng.js"></script>')}
     </#if>	
 </#if>	
+
+
+<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>
+<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>
 <script src="${urls.base}/js/tooltip/tooltip-utils.js"></script>
-<script src="${urls.base}/js/tooltip/popper.min.js"></script>
 
 <#include "stylesheets.ftl">
 <#-- <link rel="stylesheet" href="${urls.theme}/css/screen.css" /> -->
diff --git a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
index 9ba7e81a2c..58781fb6dd 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
@@ -215,8 +215,11 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
 	'<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
+
+    '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>',
+    '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>'
+)}
 
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/individual/individualTooltipBubble.js"></script>',
diff --git a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
index e910020c91..6d90552b52 100644
--- a/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
+++ b/webapp/src/main/webapp/themes/nemo/templates/mapOfScienceSetup.ftl
@@ -146,5 +146,7 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
                   '<link rel="stylesheet" href="${urls.theme}/css/layout.css" />')}
 
 
-${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>',
+${headScripts.add('<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>',
+                  '<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>'
+)}
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
index e41bdc766f..193e61d319 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
@@ -188,8 +188,10 @@ ${stylesheets.add(
 ${headScripts.add(
 	'<script type="text/javascript" src="${urls.base}/js/tiny_mce/tiny_mce.js"></script>',
 	'<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>',
-	'<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>'
+
+    '<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>',
+	'<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>'
  )}
 
 ${scripts.add(
diff --git a/webapp/src/main/webapp/themes/wilma/templates/head.ftl b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
index 853b69e1ff..f9ff0a3675 100644
--- a/webapp/src/main/webapp/themes/wilma/templates/head.ftl
+++ b/webapp/src/main/webapp/themes/wilma/templates/head.ftl
@@ -18,8 +18,9 @@
     </#if>
 </#if>
 
+${headScripts.add('<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.core.umd.js"></script>')}
+${headScripts.add('<script type="text/javascript" src="${urls.base}/webjars/floatingui/floating-ui.dom.umd.js"></script>')}
 ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/tooltip-utils.js"></script>')}
-${headScripts.add('<script type="text/javascript" src="${urls.base}/js/tooltip/popper.min.js"></script>')}
 
 <#include "stylesheets.ftl">
 <link rel="stylesheet" href="${urls.theme}/css/screen.css" />

From d0a8e448d0932ef4407d8efd30d76ad977c7e2f8 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Thu, 23 Jan 2025 17:39:44 +0100
Subject: [PATCH 20/23] Fixed clipped qr code popover in tenderfoot theme

---
 webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css   | 4 ++++
 .../templates/body/individual/individual--foaf-person.ftl     | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index e845630708..5a9ce3b366 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -366,6 +366,10 @@ img.add-individual {
     width: 15px;
 }
 
+#individual-intro {
+    overflow: unset;
+}
+
 /* ------------------------------------------------->  */
 /* TOOLTIP  ---------------------------------------->  */
 /* ------------------------------------------------->  */
diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
index 193e61d319..d9698aeda7 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
@@ -33,7 +33,7 @@
 </section>
 
 <section id="individual-intro" class="vcard person" role="region"><span itemscope itemtype="http://schema.org/Person">
-	<div class="row row-eq-height">
+	<div class="row-eq-height">
 		<div class="col-md-2 photo-wrapper">
 			<!-- Image -->
 		<#assign individualImage>

From 7053402befc0c6d694987e9885c25a6b3659cd6c Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Thu, 23 Jan 2025 20:22:20 +0100
Subject: [PATCH 21/23] Removed unnecessary css

---
 webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
index 5a9ce3b366..9021b2afee 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
+++ b/webapp/src/main/webapp/themes/tenderfoot/css/tenderfoot.css
@@ -384,8 +384,3 @@ span#qrCodeImage.bottomLeftAnchor {
     right: 25px;
     left: initial;
 }
-
-.show {
-    display: block;
-    opacity: 1;
-}

From 845470e561ce628e3e3ca5f022eabdbf3261246e Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Fri, 24 Jan 2025 10:35:40 +0100
Subject: [PATCH 22/23] Reverted affix change

---
 .../tenderfoot/templates/page/partials/headScripts.ftl       | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
index efb0e6c4c5..80b863bb7f 100644
--- a/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
+++ b/webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl
@@ -20,6 +20,11 @@ var i18nStrings = {
 	$(document).ready(function(){
         $('#nav-wrapper').height($("#nav").height());
 
+		$('#nav').affix({
+			offset: {
+				top: $('header').height()
+			}
+		});
 
         $( window ).resize(function() {
             $('#nav-wrapper').height($("#nav").height());

From 7d17bb2d0b44781b10901017f88c805eed50db24 Mon Sep 17 00:00:00 2001
From: Milos Popovic <misa01523@gmail.com>
Date: Tue, 28 Jan 2025 13:47:31 +0100
Subject: [PATCH 23/23] fix: Fixed syntax error that caused nemo theme map of
 science not to work

---
 webapp/src/main/webapp/js/jquery_plugins/jquery.blockUI.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/main/webapp/js/jquery_plugins/jquery.blockUI.min.js b/webapp/src/main/webapp/js/jquery_plugins/jquery.blockUI.min.js
index bcb89194ac..75b7b31645 100644
--- a/webapp/src/main/webapp/js/jquery_plugins/jquery.blockUI.min.js
+++ b/webapp/src/main/webapp/js/jquery_plugins/jquery.blockUI.min.js
@@ -13,4 +13,4 @@
  */
 
 !function(){"use strict";function e(e){function t(t,n){var s,h,k=t==window,y=n&&void 0!==n.message?n.message:void 0;if(n=e.extend({},e.blockUI.defaults,n||{}),!n.ignoreIfBlocked||!e(t).data("blockUI.isBlocked")){if(n.overlayCSS=e.extend({},e.blockUI.defaults.overlayCSS,n.overlayCSS||{}),s=e.extend({},e.blockUI.defaults.css,n.css||{}),n.onOverlayClick&&(n.overlayCSS.cursor="pointer"),h=e.extend({},e.blockUI.defaults.themedCSS,n.themedCSS||{}),y=void 0===y?n.message:y,k&&p&&o(window,{fadeOut:0}),y&&"string"!=typeof y&&(y.parentNode||y.jquery)){var m=y.jquery?y[0]:y,v={};e(t).data("blockUI.history",v),v.el=m,v.parent=m.parentNode,v.display=m.style.display,v.position=m.style.position,v.parent&&v.parent.removeChild(m)}e(t).data("blockUI.onUnblock",n.onUnblock);var g,I,w,U,x=n.baseZ;g=e(r||n.forceIframe?'<iframe class="blockUI" style="z-index:'+x++ +';display:none;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" src="'+n.iframeSrc+'"></iframe>':'<div class="blockUI" style="display:none"></div>'),I=e(n.theme?'<div class="blockUI blockOverlay ui-widget-overlay" style="z-index:'+x++ +';display:none"></div>':'<div class="blockUI blockOverlay" style="z-index:'+x++ +';display:none;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>'),n.theme&&k?(U='<div class="blockUI '+n.blockMsgClass+' blockPage ui-dialog ui-widget ui-corner-all" style="z-index:'+(x+10)+';display:none;position:fixed">',n.title&&(U+='<div class="ui-widget-header ui-dialog-titlebar ui-corner-all blockTitle">'+(n.title||"&nbsp;")+"</div>"),U+='<div class="ui-widget-content ui-dialog-content"></div>',U+="</div>"):n.theme?(U='<div class="blockUI '+n.blockMsgClass+' blockElement ui-dialog ui-widget ui-corner-all" style="z-index:'+(x+10)+';display:none;position:absolute">',n.title&&(U+='<div class="ui-widget-header ui-dialog-titlebar ui-corner-all blockTitle">'+(n.title||"&nbsp;")+"</div>"),U+='<div class="ui-widget-content ui-dialog-content"></div>',U+="</div>"):U=k?'<div class="blockUI '+n.blockMsgClass+' blockPage" style="z-index:'+(x+10)+';display:none;position:fixed"></div>':'<div class="blockUI '+n.blockMsgClass+' blockElement" style="z-index:'+(x+10)+';display:none;position:absolute"></div>',w=e(U),y&&(n.theme?(w.css(h),w.addClass("ui-widget-content")):w.css(s)),n.theme||I.css(n.overlayCSS),I.css("position",k?"fixed":"absolute"),(r||n.forceIframe)&&g.css("opacity",0);var C=[g,I,w],S=e(k?"body":t);e.each(C,function(){this.appendTo(S)}),n.theme&&n.draggable&&e.fn.draggable&&w.draggable({handle:".ui-dialog-titlebar",cancel:"li"});var O=f&&(!e.support.boxModel||e("object,embed",k?null:t).length>0);if(u||O){if(k&&n.allowBodyStretch&&e.support.boxModel&&e("html,body").css("height","100%"),(u||!e.support.boxModel)&&!k)var E=d(t,"borderTopWidth"),T=d(t,"borderLeftWidth"),M=E?"(0 - "+E+")":0,B=T?"(0 - "+T+")":0;e.each(C,function(e,t){var o=t[0].style;if(o.position="absolute",2>e)k?o.setExpression("height","Math.max(document.body.scrollHeight, document.body.offsetHeight) - (jQuery.support.boxModel?0:"+n.quirksmodeOffsetHack+') + "px"'):o.setExpression("height",'this.parentNode.offsetHeight + "px"'),k?o.setExpression("width",'jQuery.support.boxModel && document.documentElement.clientWidth || document.body.clientWidth + "px"'):o.setExpression("width",'this.parentNode.offsetWidth + "px"'),B&&o.setExpression("left",B),M&&o.setExpression("top",M);else if(n.centerY)k&&o.setExpression("top",'(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"'),o.marginTop=0;else if(!n.centerY&&k){var i=n.css&&n.css.top?parseInt(n.css.top,10):0,s="((document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "+i+') + "px"';o.setExpression("top",s)}})}if(y&&(n.theme?w.find(".ui-widget-content").append(y):w.append(y),(y.jquery||y.nodeType)&&e(y).show()),(r||n.forceIframe)&&n.showOverlay&&g.show(),n.fadeIn){var j=n.onBlock?n.onBlock:c,H=n.showOverlay&&!y?j:c,z=y?j:c;n.showOverlay&&I._fadeIn(n.fadeIn,H),y&&w._fadeIn(n.fadeIn,z)}else n.showOverlay&&I.show(),y&&w.show(),n.onBlock&&n.onBlock.bind(w)();if(i(1,t,n),k?(p=w[0],b=e(n.focusableElements,p),n.focusInput&&setTimeout(l,20)):a(w[0],n.centerX,n.centerY),n.timeout){var W=setTimeout(function(){k?e.unblockUI(n):e(t).unblock(n)},n.timeout);e(t).data("blockUI.timeout",W)}}}function o(t,o){var s,l=t==window,a=e(t),d=a.data("blockUI.history"),c=a.data("blockUI.timeout");c&&(clearTimeout(c),a.removeData("blockUI.timeout")),o=e.extend({},e.blockUI.defaults,o||{}),i(0,t,o),null===o.onUnblock&&(o.onUnblock=a.data("blockUI.onUnblock"),a.removeData("blockUI.onUnblock"));var r;r=l?e("body").children().filter(".blockUI").add("body > .blockUI"):a.find(">.blockUI"),o.cursorReset&&(r.length>1&&(r[1].style.cursor=o.cursorReset),r.length>2&&(r[2].style.cursor=o.cursorReset)),l&&(p=b=null),o.fadeOut?(s=r.length,r.stop().fadeOut(o.fadeOut,function(){0===--s&&n(r,d,o,t)})):n(r,d,o,t)}function n(t,o,n,i){var s=e(i);if(!s.data("blockUI.isBlocked")){t.each(function(e,t){this.parentNode&&this.parentNode.removeChild(this)}),o&&o.el&&(o.el.style.display=o.display,o.el.style.position=o.position,o.el.style.cursor="default",o.parent&&o.parent.appendChild(o.el),s.removeData("blockUI.history")),s.data("blockUI.static")&&s.css("position","static"),"function"==typeof n.onUnblock&&n.onUnblock(i,n);var l=e(document.body),a=l.width(),d=l[0].style.width;l.width(a-1).width(a),l[0].style.width=d}}function i(t,o,n){var i=o==window,l=e(o);if((t||(!i||p)&&(i||l.data("blockUI.isBlocked")))&&(l.data("blockUI.isBlocked",t),i&&n.bindEvents&&(!t||n.showOverlay))){var a="mousedown mouseup keydown keypress keyup touchstart touchend touchmove";t?e(document).bind(a,n,s):e(document).unbind(a,s)}}function s(t){if("keydown"===t.type&&t.keyCode&&9==t.keyCode&&p&&t.data.constrainTabKey){var o=b,n=!t.shiftKey&&t.target===o[o.length-1],i=t.shiftKey&&t.target===o[0];if(n||i)return setTimeout(function(){l(i)},10),!1}var s=t.data,a=e(t.target);return a.hasClass("blockOverlay")&&s.onOverlayClick&&s.onOverlayClick(t),a.parents("div."+s.blockMsgClass).length>0?!0:0===a.parents().children().filter("div.blockUI").length}function l(e){if(b){var t=b[e===!0?b.length-1:0];t&&t.focus()}}function a(e,t,o){var n=e.parentNode,i=e.style,s=(n.offsetWidth-e.offsetWidth)/2-d(n,"borderLeftWidth"),l=(n.offsetHeight-e.offsetHeight)/2-d(n,"borderTopWidth");t&&(i.left=s>0?s+"px":"0"),o&&(i.top=l>0?l+"px":"0")}function d(t,o){return parseInt(e.css(t,o),10)||0}e.fn._fadeIn=e.fn.fadeIn;var c=e.noop||function(){},r=/MSIE/.test(navigator.userAgent),u=/MSIE 6.0/.test(navigator.userAgent)&&!/MSIE 8.0/.test(navigator.userAgent),f=(document.documentMode||0,e.isFunction(document.createElement("div").style.setExpression));e.blockUI=function(e){t(window,e)},e.unblockUI=function(e){o(window,e)},e.growlUI=function(t,o,n,i){var s=e('<div class="growlUI"></div>');t&&s.append("<h1>"+t+"</h1>"),o&&s.append("<h2>"+o+"</h2>"),void 0===n&&(n=3e3);var l=function(t){t=t||{},e.blockUI({message:s,fadeIn:"undefined"!=typeof t.fadeIn?t.fadeIn:700,fadeOut:"undefined"!=typeof t.fadeOut?t.fadeOut:1e3,timeout:"undefined"!=typeof t.timeout?t.timeout:n,centerY:!1,showOverlay:!1,onUnblock:i,css:e.blockUI.defaults.growlCSS})};l();s.css("opacity");s.mouseover(function(){l({fadeIn:0,timeout:3e4});var t=e(".blockMsg");t.stop(),t.fadeTo(300,1)}).mouseout(function(){e(".blockMsg").fadeOut(1e3)})},e.fn.block=function(o){if(this[0]===window)return e.blockUI(o),this;var n=e.extend({},e.blockUI.defaults,o||{});return this.each(function(){var t=e(this);n.ignoreIfBlocked&&t.data("blockUI.isBlocked")||t.unblock({fadeOut:0})}),this.each(function(){"static"==e.css(this,"position")&&(this.style.position="relative",e(this).data("blockUI.static",!0)),this.style.zoom=1,t(this,o)})},e.fn.unblock=function(t){return this[0]===window?(e.unblockUI(t),this):this.each(function(){o(this,t)})},e.blockUI.version=2.7,e.blockUI.defaults={message:"<h1>Please wait...</h1>",title:null,draggable:!0,theme:!1,css:{padding:0,margin:0,width:"30%",top:"40%",left:"35%",textAlign:"center",color:"#000",border:"3px solid #aaa",backgroundColor:"#fff",cursor:"wait"},themedCSS:{width:"30%",top:"40%",left:"35%"},overlayCSS:{backgroundColor:"#000",opacity:.6,cursor:"wait"},cursorReset:"default",growlCSS:{width:"350px",top:"10px",left:"",right:"10px",border:"none",padding:"5px",opacity:.6,cursor:"default",color:"#fff",backgroundColor:"#000","-webkit-border-radius":"10px","-moz-border-radius":"10px","border-radius":"10px"},iframeSrc:/^https/i.test(window.location.href||"")?"javascript:false":"about:blank",forceIframe:!1,baseZ:1e3,centerX:!0,centerY:!0,allowBodyStretch:!0,bindEvents:!0,constrainTabKey:!0,fadeIn:200,fadeOut:400,timeout:0,showOverlay:!0,focusInput:!0,focusableElements:":input:enabled:visible",onBlock:null,onUnblock:null,onOverlayClick:null,quirksmodeOffsetHack:4,blockMsgClass:"blockMsg",ignoreIfBlocked:!1};var p=null,b=[]}"function"==typeof define&&define.amd&&define.amd.jQuery?define(["jquery"],e):e(jQuery)}();
-lyr3._fadeIn(opts.fadeIn,cb2);}
+lyr3._fadeIn(opts.fadeIn,cb2);