javascript - Using botbuilder SDK's Prompt.choice(), is it possible to have a custom tooltip which displays long choice-text?

Question

I am using NodeJS SDK for creating a bot using MSFT botframework. I am giving choice option to user using builder.prompt.choice. Is it possible to hover over the clickable options in case the option values are too long to be completely viewable? The code snippet is as follows. Also the options values are getting fetched at run time, so we do not have any control over the length.

function(session, args, next) {
  builder.Prompts.choice(session, "Please select one of the options:", ['I want to hover here.....', 'Since it is a very very long sentence', 'ccc ccc ccc dddd d  d aa a a ddd a sdd d '], {
    retryPrompt: "Invalid choice, Please pick below listed choices",
    listStyle: builder.ListStyle.button,
    maxRetries: 1
  });
},
function(session, results) {
  if (results.response) {
    //Do something
  }
}

Answer 1

When using the Webchat channel, you can customize the channel implementation by following the guidelines provided on Microsoft's GitHub project here .

In particular, in your case you just need to remove a properties on the ActionButton that is limiting the buttons to 1 line, adding ... if the line is too long.

The modification that you have to do is to remove the following line on the function ActionButton in botchat.js file (looks like you can't simply do it on CSS side):

this._element.style.whiteSpace="nowrap";

By doing this you will have promptChoices like the following, where the 2nd choice has 2 lines:

By the way, you can also add a title to the buttons to get the value when hovering with the mouse like I have ;-)