diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index ec9c55e6b..95003a2c6 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -1,4 +1,5 @@
 import common from '../common/common';
+import { addFunction } from '../../interactionDb';
 
 export const drawRect = function (elem, rectData) {
   const rectElem = elem.append('rect');
@@ -25,6 +26,17 @@ const sanitizeUrl = function (s) {
     .replace(/javascript:/g, '');
 };
 
+const addPopupInteraction = (id, actorCnt) => {
+  addFunction(() => {
+    const arr = document.querySelectorAll(id);
+    arr[0].addEventListener('mouseover', function () {
+      popupMenuUpFunc('actor' + actorCnt + '_popup');
+    });
+    arr[0].addEventListener('mouseout', function () {
+      popupMenuDownFunc('actor' + actorCnt + '_popup');
+    });
+  });
+};
 export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMenus) {
   if (actor.links === undefined || actor.links === null || Object.keys(actor.links).length === 0) {
     return { height: 0, width: 0 };
@@ -39,21 +51,11 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
     displayValue = 'block !important';
   }
 
-  // const a = function () {
-  //   popupMenuUpFunc('actor' + actorCnt + '_popup');
-  // };
-  // const b = function () {
-  //   popupMenuDownFunc('actor' + actorCnt + '_popup');
-  // };
   const g = elem.append('g');
   g.attr('id', 'actor' + actorCnt + '_popup');
   g.attr('class', 'actorPopupMenu');
   g.attr('display', displayValue);
-  g.attr('onmouseover', popupMenu('actor' + actorCnt + '_popup'));
-  g.attr('onmouseout', popdownMenu('actor' + actorCnt + '_popup'));
-  // g.on('onmouseover', a);
-  // g.on('onmouseout', b);
-
+  addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt);
   var actorClass = '';
   if (typeof rectData.class !== 'undefined') {
     actorClass = ' ' + rectData.class;
@@ -342,15 +344,10 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
 
     g = boxpluslineGroup.append('g');
     actor.actorCnt = actorCnt;
-    // const a = function () {
-    //   popupMenuUpFunc('actor' + actorCnt + '_popup');
-    // };
-    // const b = function () {
-    //   popupMenuDownFunc('actor' + actorCnt + '_popup');
-    // };
+
     if (actor.links != null) {
-      g.attr('onmouseover', popupMenu('actor' + actorCnt + '_popup'));
-      g.attr('onmouseout', popdownMenu('actor' + actorCnt + '_popup'));
+      g.attr('id', 'root-' + actorCnt);
+      addPopupInteraction('#root-' + actorCnt, actorCnt);
     }
   }
 
@@ -397,6 +394,7 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
     actor.height = bounds.height;
     height = bounds.height;
   }
+
   return height;
 };
 
diff --git a/src/interactionDb.js b/src/interactionDb.js
new file mode 100644
index 000000000..147837232
--- /dev/null
+++ b/src/interactionDb.js
@@ -0,0 +1,10 @@
+let interactionFunctions = [];
+export const addFunction = (func) => {
+  interactionFunctions.push(func);
+};
+export const attachFunctions = () => {
+  interactionFunctions.forEach((f) => {
+    f();
+  });
+  interactionFunctions = [];
+};
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index a8a95f2c9..0a07ba1a6 100755
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -54,6 +54,7 @@ import journeyDb from './diagrams/user-journey/journeyDb';
 import journeyRenderer from './diagrams/user-journey/journeyRenderer';
 import journeyParser from './diagrams/user-journey/parser/journey';
 import errorRenderer from './errorRenderer';
+import { attachFunctions } from './interactionDb';
 
 // import * as configApi from './config';
 // // , {
@@ -483,6 +484,7 @@ const render = function (id, _txt, cb, container) {
   } else {
     log.debug('CB = undefined!');
   }
+  attachFunctions();
 
   const node = select('#d' + id).node();
   if (node !== null && typeof node.remove === 'function') {