From f72ddd72f3ca2cfffb85ff18a88ba8e86936b5a3 Mon Sep 17 00:00:00 2001
From: Molkobain <lajarige.guillaume@free.fr>
Date: Thu, 22 Oct 2020 14:13:45 +0200
Subject: [PATCH] =?UTF-8?q?N=C2=B02847=20-=20Tooltip:=20Add=20new=20"Tippy?=
 =?UTF-8?q?"=20and=20"Popper"=20libs=20to=20the=20portal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portal/templates/layout.html.twig                 | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig b/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig
index bf27d16b2..bbe3e25bf 100644
--- a/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig
+++ b/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig
@@ -53,6 +53,9 @@
 		<link href="{{ app['combodo.portal.instance.conf'].properties.themes.bootstrap|add_itop_version }}" rel="stylesheet" id="css_bootstrap_theme">
 		{# - Portal adjustments for BS theme #}
 		<link href="{{ app['combodo.portal.instance.conf'].properties.themes.portal|add_itop_version }}" rel="stylesheet" id="css_portal">
+		{# Tippy for tooltips and Popper for their placement #}
+		<link href="{{ app['combodo.absolute_url'] ~ 'node_modules/tippy.js/dist/tippy.css'|add_itop_version }}" rel="stylesheet">
+		<link href="{{ app['combodo.absolute_url'] ~ 'node_modules/tippy.js/animations/shift-away-subtle.css'|add_itop_version }}" rel="stylesheet">
 		{# UI Extensions CSS, in an undefined order #}
         {% if app['ui_extensions_helper'].css_files is defined %}
             {% for css_file in app['ui_extensions_helper'].css_files %}
@@ -99,6 +102,9 @@
 		<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'js/bootstrap-patches.js'|add_itop_version }}"></script>
 		<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'js/bootstrap-portal-modal.js'|add_itop_version }}"></script>
 		<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/latinise/latinise.min.js'|add_itop_version }}"></script>
+		{# Tippy for tooltips and Popper for their placement #}
+		<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'node_modules/@popperjs/core/dist/umd/popper.js'|add_itop_version }}"></script>
+		<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'node_modules/tippy.js/dist/tippy-bundle.umd.js'|add_itop_version }}"></script>
 		{# Visible.js to check if an element is visible on screen #}
 		<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'lib/jquery-visible/js/jquery.visible.min.js'|add_itop_version }}"></script>
         {# Base64.js #}
@@ -497,6 +503,11 @@
                             ShowErrorDialog();
                         }
 					});
+
+					// Enable tooltips based on existing HTML markup, won't work on markup added dynamically after DOM ready (AJAX, ...)
+					$('[data-tooltip-content]:not([data-tooltip-instanciated="true"])').each(function(){
+						CombodoGlobalToolbox.InitTooltipFromMarkup($(this));
+					});
 					
 					// Initialize confirmation message handler when a form with touched fields is closed
 					$('body').portal_leave_handler({'message': '{{ 'Portal:Form:Close:Warning'|dict_s }}'});