Replace Qtip Library with Bootstrap Tooltip

webapp/src/main/webapp/css/individual/individual.css

@@ -258,10 +258,6 @@ h2#overview .verbosePropertyListing {
     display: block;
 }
 /* URI/RDF ICON DISPLAY ------->  */
-.qtip-content h5 {
-    margin: 0;
-    padding: 0;
-}
 input#uriLink {
     margin: 0;
     width: 350px;

webapp/src/main/webapp/css/vitro.css

@@ -73,7 +73,14 @@
 .contentNote p {
     font-size: .8em;
 }
-
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: " ";
+}
+.clearfix:after {
+  clear: both;
+}
 
 /* <------ INDEX PAGE*/
 .siteMap h2 {
@@ -147,7 +154,8 @@
     float:left;
 }
 a.close {
-    float: right;
+    display: block;
+    text-align: right;
     margin-right: .3em;
     font-size: .8em;
 }
@@ -521,3 +529,55 @@ table#table-listing td {
 table#table-listing td  a {
 	word-wrap: break-word;
 }
+
+/* ------------------------------------------------->  */
+/* 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;
+}
+
+.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;
+}
+
+.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;
+} 
+

webapp/src/main/webapp/js/individual/individualUriRdf.js

@@ -4,87 +4,46 @@ $(document).ready(function(){
 
     $.extend(this, i18nStringsUriRdf);
 
-    $('head').append('<style id="uriIconCSS">.qtip { font-size: 14px; max-width: none !important; } .uriIconTip { background-color: #f1f2ee; } </style>');
-
-    // This function creates and styles the "qTip" tooltip that displays the resource uri and the rdf link when the user clicks the uri/rdf icon.
-    $('span#iconControlsLeftSide').children('img#uriIcon').each(function()
-    {
-        $(this).qtip(
+    let tooltips = [
         {
-            prerender: true, // We need this for the .click() event listener on 'a.close'
-            content: {
-                text: '<h5>' + i18nStringsUriRdf.shareProfileUri + '</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">' + i18nStringsUriRdf.viewRDFProfile + '</a></h5><a class="close" href="#">' + i18nStringsUriRdf.closeString + '</a>'
-            },
-            position: {
-                my: 'top left',
-                at: 'bottom left'
-            },
-            show: {
-                event: 'click'
-            },
-            hide: {
-                event: 'click'
-            },
-            style: {
-                classes: 'uriIconTip',
-                width: 400
-            }
-        });
-    });
+            querySelector: "span#iconControlsLeftSide > img#uriIcon",
+            data: {
+                title: '<h5>' + i18nStringsUriRdf.shareProfileUri + '</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">' + i18nStringsUriRdf.viewRDFProfile + '</a></h5><div class="close-footer"><a class="close" href="#">' + i18nStringsUriRdf.closeString + '</a></div>',
+                html: true,
+                sanitize: false,
+                trigger: "click",
+                customClass: "vivoTooltip",
+                fallbackPlacements: ['bottom', 'left', 'top', 'right']
 
-    $('span#iconControlsVitro').children('img#uriIcon').each(function()
-    {
-        $(this).qtip(
-        {
-            prerender: true, // We need this for the .click() event listener on 'a.close'
-            content: {
-                text: '<h5>' + i18nStringsUriRdf.shareProfileUri + '</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">' + i18nStringsUriRdf.viewRDFProfile + '</a></h5><a class="close" href="#">' + i18nStringsUriRdf.closeString + '</a>'
-            },
-            position: {
-                my: 'top left',
-                at: 'bottom left'
-            },
-            show: {
-                event: 'click'
-            },
-            hide: {
-                event: 'click'
-            },
-            style: {
-                classes: 'uriIconTip',
-                width: 400
             }
-        });
-    });
+        },
+        {
+            querySelector: "span#iconControlsVitro > img#uriIcon",
+            data: {
+                title: '<h5>' + i18nStringsUriRdf.shareProfileUri + '</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">' + i18nStringsUriRdf.viewRDFProfile + '</a></h5><div class="close-footer"><a class="close" href="#">' + i18nStringsUriRdf.closeString + '</a></div>',
+                html: true,
+                sanitize: false,
+                trigger: "click",
+                customClass: "vivoTooltip",
+                fallbackPlacements: ['bottom', 'left', 'top', 'right']
 
-    $('span#iconControlsRightSide').children('img#uriIcon').each(function()
-    {
-        $(this).qtip(
+            }
+        },
         {
-            prerender: true, // We need this for the .click() event listener on 'a.close'
-            content: {
-                text: '<h5>' + i18nStringsUriRdf.shareProfileUri + '</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">' + i18nStringsUriRdf.viewRDFProfile + '</a></h5><a class="close" href="#">' + i18nStringsUriRdf.closeString + '</a>'
-            },
-            position: {
-                my: 'top right',
-                at: 'bottom right'
-            },
-            show: {
-                event: 'click'
-            },
-            hide: {
-                event: 'click'
-            },
-            style: {
-                classes: 'uriIconTip',
-                width: 400
+            querySelector: "span#iconControlsRightSide > img#uriIcon",
+            data: {
+                title: '<h5>' + i18nStringsUriRdf.shareProfileUri + '</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">' + i18nStringsUriRdf.viewRDFProfile + '</a></h5><div class="close-footer"><a class="close" href="#">' + i18nStringsUriRdf.closeString + '</a></div>',
+                html: true,
+                sanitize: false,
+                trigger: "click",
+                customClass: "vivoTooltip",
+                fallbackPlacements: ['bottom', 'right', 'top', 'left']
             }
-        });
-    });
+        },
+    ]
 
-    // Prevent close link for URI qTip from requesting bogus '#' href
-    $('a.close').click(function() {
-        $('#uriIcon').qtip("hide");
-        return false;
-    });
+    tooltips.forEach(tooltip => {
+        setTooltip(tooltip.querySelector, tooltip.data)
+    })
+
 });

webapp/src/main/webapp/js/individual/propertyGroupControls.js

@@ -10,17 +10,17 @@ $(document).ready(function(){
     let showAllBtn = $('#show-all-tabs')[0];
     let tabList = $('ul.propertyTabsList')[0];
 
-    showAllBtn.addEventListener('show.bs.tab', function (event) {
+    showAllBtn?.addEventListener('show.bs.tab', function (event) {
         event.preventDefault()
         showAllTabs();
         manageLocalStorage();
     })
 
-    showAllBtn.addEventListener('hide.bs.tab', function (event) {
+    showAllBtn?.addEventListener('hide.bs.tab', function (event) {
         $(".tab-content>section.tab-pane").removeClass('show active')
     })
 
-    tabList.addEventListener('shown.bs.tab', function (event) {
+    tabList?.addEventListener('shown.bs.tab', function (event) {
         manageLocalStorage();
     })