1

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
  }
}
nwxdev
  • 4,194
  • 3
  • 16
  • 22
AIMCognitiveGurgaon BigData
  • 133
  • 1
  • 1
  • 12

1 Answers1

3

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:

enter image description here

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

Nicolas R
  • 13,812
  • 2
  • 28
  • 57
  • If that reply was helpful, please don't forget to accept it, thanks – Nicolas R Jan 23 '18 at 22:10
  • Hi Nicolas R, how did you add the tooltip to the options. I see a property _element.title, but what value did you assign to it. Any pointers would be helpful. Thanks – Vaibhav Dhore Nov 17 '20 at 12:39
  • To provide context, I am getting options from QnAMakerOptions and displaying..sometimes the text on that option is too large and it gets truncated. Hence, I need to provide tootip on those options, so that user can hover over it and read complete text. Thanks in advance. – Vaibhav Dhore Nov 17 '20 at 13:26