Replace Qtip Library with Floating ui

webapp/pom.xml

@@ -133,6 +133,36 @@
                                     </fileMappers>
                                     <outputDirectory>target/${project.artifactId}-${project.version}/webjars/fonts/open-sans/</outputDirectory>
                                 </artifactItem>
+                                <artifactItem>
+                                    <groupId>org.webjars.npm</groupId>
+                                    <artifactId>floating-ui__dom</artifactId>
+                                    <type>jar</type>
+                                    <includes>
+                                        META-INF/resources/webjars/floating-ui__dom/*/dist/**</includes>
+                                    <fileMappers>
+                                        <org.codehaus.plexus.components.io.filemappers.RegExpFileMapper>
+                                            <pattern>^META-INF/resources/webjars/floating-ui__dom/[^/]+/dist/</pattern>
+                                            <replacement>./</replacement>
+                                        </org.codehaus.plexus.components.io.filemappers.RegExpFileMapper>
+                                    </fileMappers>
+                                    <outputDirectory>
+                                        target/${project.artifactId}-${project.version}/webjars/floatingui/</outputDirectory>
+                                </artifactItem>
+                                <artifactItem>
+                                    <groupId>org.webjars.npm</groupId>
+                                    <artifactId>floating-ui__core</artifactId>
+                                    <type>jar</type>
+                                    <includes>
+                                        META-INF/resources/webjars/floating-ui__core/*/dist/**</includes>
+                                    <fileMappers>
+                                        <org.codehaus.plexus.components.io.filemappers.RegExpFileMapper>
+                                            <pattern>^META-INF/resources/webjars/floating-ui__core/[^/]+/dist/</pattern>
+                                            <replacement>./</replacement>
+                                        </org.codehaus.plexus.components.io.filemappers.RegExpFileMapper>
+                                    </fileMappers>
+                                    <outputDirectory>
+                                        target/${project.artifactId}-${project.version}/webjars/floatingui/</outputDirectory>
+                                </artifactItem>
                             </artifactItems>
                             <overWriteReleases>true</overWriteReleases>
                             <overWriteSnapshots>true</overWriteSnapshots>
@@ -157,6 +187,16 @@
     </build>
 
     <dependencies>
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>floating-ui__dom</artifactId>
+            <version>1.6.12</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>floating-ui__core</artifactId>
+            <version>1.6.8</version>
+        </dependency>
         <dependency>
             <groupId>org.webjars.npm</groupId>
             <artifactId>jquery-migrate</artifactId>

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/tooltip.css

@@ -0,0 +1,73 @@
+/* $This file is distributed under the terms of the license in LICENSE$ */
+
+
+/* ------------------------------------------------->  */
+/* TOOLTIP  ---------------------------------------->  */
+/* ------------------------------------------------->  */
+.vitroTooltip.tooltip  {
+    opacity: 1;
+    position: absolute;
+}
+
+.vitroTooltip.tooltip > .tooltip-inner {
+    opacity: 1;
+    max-width: 400px;
+
+    background-color: #f1f2ee;
+    border: 1px solid #F1D031;
+    text-align: left;
+    border-radius: 0;
+
+    color: #333;
+    max-width: initial;
+    padding: 0.25rem;
+    position: relative;
+    z-index: 100;
+}
+
+.vitroTooltip > .tooltip-inner .close-footer {
+    display: flex;
+}
+
+.vitroTooltip > .tooltip-inner .close-footer a.close {
+    margin-left: auto;
+}
+
+.vitroTooltip > .tooltip-inner h5 {
+    padding-bottom: 0;
+}
+
+.vitroTooltip > .tooltip-arrow::before {
+    --bs-tooltip-bg: #F1D031;
+}
+
+.tooltip > .tooltip-arrow {
+  position: absolute;
+  z-index: 50;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+  background: #F1D031;
+}
+
+.tooltip:not(.vitroTooltip) > .tooltip-inner, .tooltip:not(.vitroTooltip) > .tooltip-inner * {
+    color: unset;
+}
+
+div.vitroTooltip.downloadTip {
+    max-width: 600px;
+    --bs-tooltip-max-width: 600px;
+}
+
+div.tooltip.vitroTooltip.vitroTooltip-yellow {
+    max-width: 500px;
+    --bs-tooltip-max-width: 500px;
+}
+
+.tooltip.vitroTooltip-yellow > .tooltip-inner {
+    background-color: #ffffc0;
+    font-size: 0.8em;
+    padding: 20px 22px;
+    text-align: left;
+    line-height: 12px;
+} 

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

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

@@ -4,87 +4,40 @@ $(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>',
+                trigger: "click",
+                customClass: "vitroTooltip",
+                placements: ['top', 'right', 'bottom', 'left'],
 
-    $('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>',
+                trigger: "click",
+                customClass: "vitroTooltip",
+                placements: ['top', 'right', 'bottom', 'left'],
 
-    $('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>',
+                trigger: "click",
+                customClass: "vitroTooltip",
+                placements: ['top', 'left', 'bottom', 'right'],
             }
-        });
-    });
+        },
+    ]
 
-    // 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)
+    })
+
 });