Tooltips coordinates

Developers
1

I am trying to create tooltips for sequence flow elements, so that they will be displayed when user places mouse on the element with the below code, but tooltips are displaying on expected position if the diagram is small, but when the diagram is large and if I scroll to the right and places mouse on the sequence flow element, then tool tip is displaying elsewhere. Any suggestions to display tooltip on exact mouse position?

var tooltips = bpmnModeler.get("tooltips");
 if(e.element.type == 'bpmn:SequenceFlow' && typeof tooltips !== 'undefined') {
                            var businessObject = e.element.businessObject;
                            var value ='TOOLTIP TEXT';
                            var toolTipText = '<div style="width: 300px; color: black;">' + value + '</div>';
                            tooltips.remove(toolTipId);
                            toolTipId = null;
                            var xx = e.originalEvent.layerX + 5;
                            var yy = e.originalEvent.layerY + 5;
                            toolTipId = tooltips.add({
                                position: {
                                    x: xx,
                                    y: yy
                                },
                                id: 'toolTipId',
                                timeout : 1000,
                                html:toolTipText
                            });
                        }
2

I have tried with originalEvent.clientX, originalEvent.X, originalEvent.screenX but no success, any suggestions to get xy co-ordinates based on mouse pointer?

3

finally after a hard toil able to figure out the graph tranform matrix is getting negative coordinates and able to fix it

var tooltips = bpmnModeler.get("tooltips");
 if(e.element.type == 'bpmn:SequenceFlow' && typeof tooltips !== 'undefined') {
                            var businessObject = e.element.businessObject;
                            var value ='TOOLTIP TEXT';
                            var toolTipText = '<div style="width: 300px; color: black;">' + value + '</div>';
                            tooltips.remove(toolTipId);
 var xx = e.originalEvent.layerX;
                            var yy = e.originalEvent.layerY;
                            var me = 0;
                            var mf = 0;
                            var a = document.getElementsByClassName("viewport");
                            if (typeof a !== 'undefined' && typeof a[0].transform !== 'undefined' && typeof a[0].transform.baseVal !== 'undefined') {
                                var baseVal = a[0].transform.baseVal;
                                var consolidate = baseVal.consolidate();
                                if(typeof consolidate !== 'undefined' && consolidate != null){
                                    var matrix = consolidate.matrix;
                                    if (typeof matrix !== 'undefined' && matrix != null) {
                                        me = matrix.e;
                                        mf = matrix.f;
                                    }
                                }
                            }
                            if (me < 0 && mf < 0) {
                                xx = xx - (me);
                                yy = yy - (mf);
                            }
                            if (me < 0 && mf > 0) {
                                xx = xx - (me);
                                yy = yy - (mf);
                            }

                            toolTipId = tooltips.add({
                                position: {
                                    x: xx,
                                    y: yy + 5
                                },
                                id: 'toolTipId',
                                timeout : 1000,
                                html:toolTipText
                            });
}
2 Likes