Edit UI bot framework

Question

I read here that it was possible to display a message when the cursor is on a button of a promt. I looked a little on the net but I did not find what part of the botchat.js edit. Can you teach me? Thanks you

Hi @RateReality, Do you try the solution that I shared? Does it help you achieve the requirement? — Fei Han, Aug 02 '18 at 09:47
Hi @RateReality, you can mark it as accepted answer, which would help other community members quickly find this thread to solve similar problems. — Fei Han, Aug 07 '18 at 05:36
As far as I know, accepting an answer does not have reputation point limitation to original poster, you can refer to [this link](https://stackoverflow.com/help/someone-answers) to know more about accepting the answer in SO. — Fei Han, Aug 10 '18 at 01:49

score 1 · Answer 1 · answered Jul 30 '18 at 09:22

display a message when the cursor is on a button of a promt.

You could modify the botchat.js file to add title attribute to the button in order to shown it as a tooltip text when the mouse moves over the button, the following code snippet is for your reference.

Add add title attribute to actionButton element within ActionCollection.prototype.render function:

for (var i = 0; i < this.items.length; i++) {
                if (isActionAllowed(this.items[i], forbiddenActionTypes)) {
                    var actionButton = new ActionButton(this.items[i]);
                    actionButton.element.style.overflow = "hidden";
                    actionButton.element.style.overflow = "table-cell";
                    actionButton.element.style.flex = this._owner.hostConfig.actions.actionAlignment === Enums.ActionAlignment.Stretch ? "0 1 100%" : "0 1 auto";

                    /*add title attribute to button*/
                    actionButton.element.title = this.items[i].title;
                    actionButton.text = this.items[i].title;
                    actionButton.onClick = function (ab) { _this.actionClicked(ab); };
                    this._actionButtons.push(actionButton);
                    buttonStrip.appendChild(actionButton.element);
                    this._renderedActionCount++;
                    if (this._renderedActionCount >= this._owner.hostConfig.actions.maxActions || i == this.items.length - 1) {
                        break;
                    }
                    else if (this._owner.hostConfig.actions.buttonSpacing > 0) {
                        var spacer = document.createElement("div");
                        if (orientation === Enums.Orientation.Horizontal) {
                            spacer.style.flex = "0 0 auto";
                            spacer.style.width = this._owner.hostConfig.actions.buttonSpacing + "px";
                        }
                        else {
                            spacer.style.height = this._owner.hostConfig.actions.buttonSpacing + "px";
                        }
                        Utils.appendChild(buttonStrip, spacer);
                    }
                }
            }

Test result:

Edit UI bot framework

1 Answers1