Input Port Tooltip Flickering and Impossible to Change Due To CSS

[drvictorvs]

Concerto Platform version

v5.0.26

Expected behavior

Inside a node in the Test Flow of a given test, the tooltip containing the contents of an input port should should show up normally, regardless of the content of the default value field.

Actual behavior

If you add a <style> tag that defines certain settings for selectors .tooltip and .tooltip::after—don't judge me, I was debugging—, after you save your alterations, when you hover that input port, the tooltip will start flickering, and clicking on the link won't open the input port's settings, forcing the user to insert other css to change its contents back.

This can't be remedied by removing and readding the input port.

Steps to reproduce the issue

WARNING: DON'T DO THIS IF YOU CAN'T USE THE DEV SETTINGS, THE STYLISH EXTENSION, OR ALTERNATE METHODS OF INSERTING CSS INTO THE CONCERTO PLATFORM ADMINISTRATION PANEL.

Go to the node of any test, create an input variable of any name, and set as its default value:

<style type="text/css">
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
  padding-left: 10px;
  padding-right: 10px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

To undo that, you have to add the following CSS to the Concerto Platform:

.tooltip, .tooltiptext {
display: none;
}

Ironically, I suppose one way to do that would be adding it to the default value of a different input port, using display:none !IMPORTANT.