diff --git a/webapp/src/main/webapp/js/individual/individualQtipBubble.js b/webapp/src/main/webapp/js/individual/individualQtipBubble.js
deleted file mode 100644
index 78d484acc9..0000000000
--- a/webapp/src/main/webapp/js/individual/individualQtipBubble.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/* $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
- // over the research area "group" icon.
-
- $.extend(this, i18nStrings);
-
- $('head').append('');
-
- $('#researchAreaIcon').each(function()
- {
- $(this).qtip(
- {
- prerender: true,
- content: {
- text: '' + i18nStrings.researchAreaTooltipOne + '
' + i18nStrings.researchAreaTooltipTwo + '
'
- },
- position: {
- my: 'top left',
- at: 'bottom center',
- adjust: {
- x:22,
- y:30
- }
- },
- style: {
- classes: 'researchAreaTip',
- height: 56,
- width: 180,
- }
- });
- });
-
- $('head').append('');
-
- $('#fullViewIcon').each(function()
- {
- $(this).qtip(
- {
- content: {
- text: '' + i18nStrings.quickviewTooltip + '
'
- },
- position: {
- my: 'top left',
- at: 'bottom center',
- adjust: {
- x:27,
- y:30
- }
- },
- style: {
- classes: 'bubbleTip',
- height: 56,
- width: 140,
-
- }
- });
- });
-
- $('#quickViewIcon').each(function()
- {
- $(this).qtip(
- {
- content: {
- text: '' + i18nStrings.standardviewTooltipOne + '
' + i18nStrings.standardviewTooltipTwo + '
'
- },
- position: {
- my: 'top left',
- at: 'bottom center',
- adjust: {
- x:28,
- y:30
- }
- },
- style: {
- classes: 'bubbleTip',
- height: 56,
- width: 144,
- }
- });
- });
-});
diff --git a/webapp/src/main/webapp/js/individual/individualTooltipBubble.js b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
new file mode 100644
index 0000000000..266402110c
--- /dev/null
+++ b/webapp/src/main/webapp/js/individual/individualTooltipBubble.js
@@ -0,0 +1,43 @@
+/* $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 = [
+ {
+ querySelector: "#researchAreaIcon",
+ data: {
+ title: "" + i18nStrings.researchAreaTooltipOne + "
" + i18nStrings.researchAreaTooltipTwo + "
",
+ html: true,
+ fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+ customClass: "vivoTooltip"
+ }
+ },
+ {
+ querySelector: "#fullViewIcon",
+ data: {
+ title: i18nStrings.quickviewTooltip,
+ html: true,
+ fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+ customClass: "vivoTooltip"
+ }
+ },
+ {
+ querySelector: "#quickViewIcon",
+ data: {
+ title: "" + i18nStrings.standardviewTooltipOne + '
' + i18nStrings.standardviewTooltipTwo + "
",
+ html: true,
+ fallbackPlacements: ['bottom', 'left', 'top', 'right'],
+ customClass: "vivoTooltip"
+ }
+ },
+ ]
+
+ tooltips.forEach(tooltip => {
+ setTooltip(tooltip.querySelector, tooltip.data)
+ })
+
+});
diff --git a/webapp/src/main/webapp/js/individual/propertyGroupControls.js b/webapp/src/main/webapp/js/individual/propertyGroupControls.js
index 1b50991dfe..8c9f9a471d 100644
--- a/webapp/src/main/webapp/js/individual/propertyGroupControls.js
+++ b/webapp/src/main/webapp/js/individual/propertyGroupControls.js
@@ -13,17 +13,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();
})
diff --git a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
index 27f34d4927..27d4c149b7 100644
--- a/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
+++ b/webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js
@@ -84,36 +84,48 @@ function initVisModeTypeButton() {
}
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('');
-
- visCommonToolTipInit = false;
- }
- target.qtip({
- content: {
- text: tipText
- },
- position: {
- my: tipLocation,
- at: 'center'
+ let tooltips = [
+ {
+ querySelector: "#imageIconOne",
+ data: {
+ title: "" + $('#toolTipOne').html() + "
",
+ customClass: "vivoTooltip vivoTooltip-yellow",
+ html: true,
+ sanitize: false,
+ fallbackPlacements: ['right', 'bottom', 'top', 'left']
+ }
+ },{
+ querySelector: "#exploreInfoIcon",
+ data: {
+ title: "" + $('#exploreTooltipText').html() + "
",
+ customClass: "vivoTooltip vivoTooltip-yellow",
+ html: true,
+ sanitize: false,
+ fallbackPlacements: ['right', 'bottom', 'top', 'left']
+ }
+ },{
+ querySelector: "#compareInfoIcon",
+ data: {
+ title: "" + $('#compareTooltipText').html() + "
",
+ customClass: "vivoTooltip vivoTooltip-yellow",
+ html: true,
+ sanitize: false,
+ fallbackPlacements: ['right', 'bottom', 'top', 'left']
+ }
+ },{
+ querySelector: "#imageIconThree",
+ data: {
+ title: "" + $('#toolTipThree').html() + "
",
+ customClass: "vivoTooltip vivoTooltip-yellow",
+ html: true,
+ sanitize: false,
+ fallbackPlacements: ['left', 'bottom', 'top', 'right']
+ }
},
- style: {
- classes: 'visCommonToolTip',
- width: 500,
- }
- });
+ ]
+
+ 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 a786aeb654..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,19 +188,22 @@ var i18nStringsUriRdf = {
};
-${stylesheets.add('${groupName?capitalize} ${groupName?capitalize} ${groupName?capitalize} ${groupName?capitalize} ${i18n().view_all_capitalized} ${i18n().view_all_capitalized}