diff --git a/css/80_app.css b/css/80_app.css index 2cb6d3d46c..e6510aa069 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2663,6 +2663,9 @@ button.raw-tag-option svg.icon { font-family: monospace; white-space: pre; } +.tag-text::-webkit-scrollbar-thumb:hover { + cursor: pointer; /* Change mouse pointer to a hand */ +} .tag-text, .tag-list { diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index 58f0d076dc..baf81dc615 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/modules/ui/sections/raw_membership_editor.js @@ -20,6 +20,7 @@ import { uiSection } from '../section'; import { uiTooltip } from '../tooltip'; import { utilArrayGroupBy, utilArrayIntersection } from '../../util/array'; import { utilDisplayName, utilNoAuto, utilHighlightEntities, utilUniqueDomId } from '../../util'; +import * as d3 from 'd3'; export function uiSectionRawMembershipEditor(context) { @@ -364,10 +365,28 @@ export function uiSectionRawMembershipEditor(context) { .attr('for', function(d) { return d.domId; }); - + var tooltip = d3.select('body') // tooltip made for relations + .append('span') // Appending a span as tooltip + .style('position', 'absolute') + .style('visibility', 'hidden') + .style('background-color', 'black') + .style('color', 'white') + .style('padding', '5px') + .style('border-radius', '4px') + .style('pointer-events', 'none') // Prevent interfering with mouse events + .text(''); // Initialize the text of tooltip empty + var labelLink = labelEnter .append('span') .attr('class', 'label-text') + .on('mouseover',function(d){ + tooltip.text(d.toElement.innerText) + .style('visibility','visible') + .style('top', (d.pageY + 10) + 'px') // Position below the cursor + .style('left', (d.pageX + 10) + 'px'); // Position right of the cursor + }).on('mouseout',function(d){ + tooltip.style('visibility','hidden'); + }) .append('a') .attr('href', '#') .on('click', selectRelation);