0001-Replace-jQuery-UI-tooltip-to-vanilla-js-tooltip.patch - Redmine

       });
+    }
     $(function () {
       $("[title]:not(.no-tooltip)").tooltip({
         show: {
           delay: 400
         },
         position: {
           my: "center bottom-5",
           at: "center top"
+        }
       });
     });
     function inlineAutoComplete(element) {
         'use strict';

     /***** Tooltips ******/
     .tooltip{position:relative;z-index:24;}
     .tooltip:hover{z-index:25;color:#000;}
     .tooltip span.tip{display: none; text-align:left;}
     .tooltip span.tip a { color: #169 !important; }
     .tooltip span.tip img.gravatar {
-...
       margin: 0;
+    }
     div.tooltip:hover span.tip{
     div.tooltip span.tip{
     position:fixed;
     text-align:left;
     display:block;
     position:absolute;
     top:12px; width:270px;
     visibility:hidden;
     width:270px;
     border:1px solid #555;
     border-radius: 3px;
     background-color:#fff;
-...
     font-size: 0.75rem;
     color:#505050;
     box-shadow: 0 1px 2px rgba(0,0,0,0.05);
     z-index:26;
+    }
     table.cal div.tooltip:hover span.tip {
       top: 25px;
     .action-tooltip {
       position: fixed;
       display: inline-block!important;
       font-weight: normal;
       background: #000;
       color: #fff;
       border-radius: 3px;
       padding: 10px;
       visibility: hidden;
       opacity: 0;
       transition: 0.3s ease-in;
       font-size: 0.8rem;
       border: 0;
       box-shadow: none;
       white-space: pre-wrap;
       pointer-events: none;
+    }
     img.ui-datepicker-trigger {
-...
       background: #EEEEEE;
+    }
     /***** Tooltips *****/
     .ui-tooltip {
       background: #000;
       color: #fff;
       border-radius: 3px;
       border: 0;
       box-shadow: none;
       white-space: pre-wrap;
       pointer-events: none;
+    }
     /***** SVG Icons *****/
     .icon, .icon-only {
       display: inline-flex;

     /**
      * Redmine - project management software
      * Copyright (C) 2006-  Jean-Philippe Lang
      * This code is released under the GNU General Public License.
      */
     import { Controller } from "@hotwired/stimulus"
     import { Tooltip } from 'tooltip'
     // Connects to data-controller="issue--tooltip"
     export default class extends Controller {
       show(e) {
         const tooltip = new Tooltip({
           delay: 0,
           selector: '.tooltip',
           createHook: (element) => {
             element.tooltipElement = element.querySelector('.tip');
           },
           positionHook: (element, tooltip) => {
             const trect = tooltip.getBoundingClientRect();
             const rect  = element.getBoundingClientRect();
             const gap = Math.min(12, rect.height / 2)
             return {
               top: rect.top + gap,
               left: rect.left + gap,
               width: trect.width,
               height: trect.height
+            }
+          }
         });
         tooltip.show(e)
+      }
+    }

app/javascript/main.js
1	1	import "controllers"
	2	import {createTooltip} from 'tooltip';
	3
	4	document.addEventListener('mouseover', (e) => {
	5	const tooltip = createTooltip()
	6	tooltip.show(e)
	7	});

     /**
      * Redmine - project management software
      * Copyright (C) 2006-  Jean-Philippe Lang
      * This code is released under the GNU General Public License.
      */
     export function createTooltip() {
       const tooltip = new Tooltip({
         selector: '[title]:not(.no-tooltip)',
         createHook: (element) => {
           const tooltip = document.createElement('span')
           tooltip.textContent = element.getAttribute('title');
           element.setAttribute('title', '');
           tooltip.classList.add('action-tooltip');
           element.insertAdjacentElement('afterbegin', tooltip);
           element.tooltipElement = tooltip;
         },
         positionHook: (element, tooltip) => {
           const trect = tooltip.getBoundingClientRect();
           const rect  = element.getBoundingClientRect();
           return {
             top: rect.top - trect.height - 5,
             left: rect.left + rect.width / 2 - trect.width / 2,
             width: trect.width,
             height: trect.height
+          }
+        }
       });
       return tooltip;
+    }
     export class Tooltip {
       constructor(options) {
         this.options = Object.assign({
           delay: 400,
           selector: undefined,
         }, options)
         this.delayedShow = null;
         this.delayedHide = null;
+      }
       show(e) {
         const target = e.target.closest(this.options.selector)
         if (target !== null) {
           if (target.tooltipElement === undefined) {
             this.options.createHook(target);
             target.addEventListener('mouseleave', (e) => this.hide(e));
+          }
           this.delayedShow = setTimeout(() => {
             this.setPosition(target);
           }, this.options.delay);
+        }
+      }
       hide(e) {
         if (this.delayedShow !== null) {
           clearTimeout(this.delayedShow);
+        }
         this.delayedHide = setTimeout(() => {
           const tooltip = e.target.tooltipElement;
           tooltip.style.visibility = 'hidden';
           tooltip.style.opacity = 0;
         }, this.options.delay);
+      }
       setPosition(target) {
         const tooltip = target.tooltipElement;
         const position = this.options.positionHook(target, tooltip);
         const cheight = document.documentElement.clientHeight;
         const cwidth = document.documentElement.clientWidth;
         if (position.top + position.height > cheight) {
           position.top = cheight - position.height;
+        }
         if (position.left + position.width > cwidth) {
           position.left = cwidth - position.width;
+        }
         if (position.top < 0) {
           position.top = 0;
+        }
         if (position.left < 0) {
           position.left = 0;
+        }
         tooltip.style.top = `${position.top}px`;
         tooltip.style.left = `${position.left}px`;
         tooltip.style.visibility = 'visible';
         tooltip.style.opacity = 1;
+      }
+    }

app/views/common/_calendar.html.erb
1	1	<%= form_tag({}, :data => {:cm_url => issues_context_menu_path}) do -%>
2	2	<%= hidden_field_tag 'back_url', url_for(:params => request.query_parameters), :id => nil %>
3		<ul class="cal">
	3	<ul class="cal" data-controller="issue_tooltip" data-action="mouseover->issue_tooltip#show">
4	4	<li scope="col" title="<%= l(:label_week) %>" class="calhead week-number"></li>
5	5	<% 7.times do \|i\| %>
6	6	<li scope="col" class="calhead"><%= day_name((calendar.first_wday + i) % 7) %></li>

       </td>
     <% end %>
     <td>
     <div style="position:relative;height:<%= t_height + 24 %>px;overflow:auto;" id="gantt_area">
     <div style="position:relative;height:<%= t_height + 24 %>px;overflow:auto;" id="gantt_area" data-controller="issue_tooltip" data-action="mouseover->issue_tooltip#show">
     <%
       style  = ""
       style += "width: #{g_width - 1}px;"

config/importmap.rb
1	1	# Pin npm packages by running ./bin/importmap
2	2
3	3	pin "main"
	4	pin "tooltip"
4	5	pin "@hotwired/stimulus", to: "stimulus.min.js"
5	6	pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
6	7	pin_all_from "app/javascript/controllers", under: "controllers"

Project

General

Profile

Redmine

Defect #42517 » 0001-Replace-jQuery-UI-tooltip-to-vanilla-js-tooltip.patch