Workflow: Hover over blue balls should present tooltip

[orchardbot]

@jetski5822 created: https://orchard.codeplex.com/workitem/19770

Go to Workflow Add Decision and give it two outcomes "true,false",go back to the designer and you cant tell which is which.

[orchardbot]

@sebastienros commented:

I agree, same issue with user task, or any activity with multiple outcomes actually :/

[orchardbot]

flew2bits commented:

I implemented a quick proof of concept of this. It may not be a great solution, but it does work.

The first part is to add a div to Views/Admin/Edit.cshtml:

<div id="ep-tooltip"></div>

Next, I added some css to orchard-workflows-admin.css:

#ep-tooltip {
    font-size: 12px;
    border: solid 1px black;
    display: none;
    z-index: 1000;
    position: absolute;
    background: white;
    padding: 3px;
}

I created a function to enable the tooltips:

function addTooltip(endPoint) {
    (function (endPoint) {
        endPoint.bind("mouseenter", function (ep) {
                $('#ep-tooltip')
                    .css({
                        top: ep.endpoint.y - (ep.endpoint.h / 2) - 23,
                        left: ep.endpoint.x
                    })
                    .text(ep.outcome)
                    .show();
        });
        endPoint.bind("mouseexit", function (ep) {
                $('#ep-tooltip').hide();
        });
    })(endPoint);
}

Finally, when the endpoints are created, the addTooltip function is called with the newly created endpoint:

                for (i = 0; i < outcomes.length; i++) {
                    var ep = jsPlumb.addEndpoint(dom, {
                        anchor: "Continuous",
                        connectorOverlays: [["Label", { label: outcomes[i], cssClass: "connection-label" }]],
                    },
                        sourceEndpointOptions);

                    addTooltip(ep); // <--- activate tooltip

                    elt.endpoints[outcomes[i]] = ep;
                    ep.outcome = outcomes[i];
                    // ep.overlays[0].setLabel(outcomes[i]);
                }

I've tested this in the latest chrome and in IE 10. I don't know if it works elsewhere, but it should be too hard to modify if there are problems in other browsers.

[orchardbot]

@sebastienros commented:

I have tried to use jsPlumb to do it but never succeeded, maybe this is the way to go. We should have a look at the new version though, and probably ask on their forum to see if there is another way to do that.

[orchardbot]

flew2bits commented:

According to https://groups.google.com/forum/?fromgroups#!searchin/jsplumb/tooltip/jsplumb/gZ7biR37Yyc/J9P-_zCD7REJ, using the mouseenter/mouseexit is the only way to achieve tooltip like functionality. The code I posted doesn't work perfectly, though. For example, there are problems when dragging the endpoint to another node, but it shouldn't take too much work to clean that up.

[orchardbot]

@csurieux commented:

I don't know jsplumb but when I look at their demo pages I see many colors (and line types). May be we can adopt a color convention covering basic situations: green =yes red=no grey= other states

[orchardbot]

ItaloFSS commented:

I was able to do it by adding the following line to orchard-workflows.js at line 149 (Orchard v.1.8.0.0).

ep.canvas.title = outcomes[i];

[orchardbot]

@sebastienros commented:

Awesome ! Do you want to create a PR for that ?