Special indication on nodes with description

Core Development Feature Requests
83

May as well throw my hat in:

chrome_CLiKAZHXCW

  • adds a g element with the rounded rect and text elements
  • adds CSS for the transitioning stroke/fill/y position and cursor.

Thats it :wink:

SVG + CSS inside CLICK TO EXPAND 
<svg viewBox="-50 -50 380 380">
    <!-- a typical node-->
   <g class="red-ui-flow-node red-ui-flow-node-group" id="fb202240615b9c7f" transform="translate(20,10)">
        <!-- the below g is added to the top of the node group -->
        <g class="tip" fill="lightyellow"  >
          <rect width="30" height="20" x="95" y="-5" rx="2" />
          <text class="" x="100" y="4">docs</text>
        </g>
        <!-- everything else is the existing node content -->
        <rect class="red-ui-flow-node " rx="5" ry="5" fill="#fdd0a2" width="140" height="30"></rect>
        <g class="red-ui-flow-port-input" transform="translate(-5,10)">
            <rect class="red-ui-flow-port" rx="3" ry="3" width="10" height="10"></rect>
        </g>
        <g class="red-ui-flow-port-output" transform="translate(135,10)">
            <rect rx="3" ry="3" width="10" height="10" class="red-ui-flow-port"></rect>
        </g>
  </g>
</svg>

<style>
    svg g.tip {
        transition: transform 0.3s ease, fill-opacity 0.3s ease, stroke-opacity 0.3s ease;
        fill-opacity: 0.3;
        stroke-opacity: 0.3;
        cursor: pointer;
    }
    
    svg g.tip text {
        font-style="normal";
        font-size: 8px;
        font-family: sans-serif;
        stroke-width: 0.0;
        fill: #000;
        color: #000;
    }
    
    svg .tip rect {
      fill: lightyellow;
      stroke-width: 0.5;
      stroke: #000;
    }
    
    svg:hover g.tip:hover {
        transform: translatey(-6px);
        fill-opacity: 1;
        stroke-opacity: 1;
    }
</style>
6 Likes