Tool tip for long texts in Hero Cards

Question

I am using Bot Framework Webchat (React based). I use Card Actions (Hero Cards) to suggest a list of similar questions. Sometimes the text within the Hero Card might be too long. In that case the text gets truncated and replaced with three dots. Is it possible to have tool tip for the Hero Cards?

I looked into the HeroCard options in the code but didn't find anything relevant.

I have raised this on Github: https://github.com/microsoft/BotFramework-WebChat/issues/2032

Any help with this please?

Hope you got it working. If you feel my answer was sufficient, please "accept" it so I can clear this ticket from my support tracker. If not, let me know how else I can help! — tdurnford

tdurnford tdurnford · Accepted Answer · 2019-05-28T20:18:06

Web Chat utilizes the Adaptive Cards NPM package to render cards, and, unfortunately, Adaptive Cards does not support adding tooltip descriptions to elements in the card. There are, however, several issues open on GitHub regarding adding tooltip functionality, so hopefully, that feature will be available in Web Chat soon.

Even though Adaptive Cards doesn't support adding tooltips, you can create a custom attachment middleware for Web Chat and implement your own Hero Card renderer. The code snippet below shows a basic Hero Card renderer without any styling.

<script type="text/babel">

  const HeroCardAttachment = ({ buttons, images, title, store }) =>
    <div className='ac-container'>
      <div className='ac-container'>
        { images.map(({ url }, index) => 
          <window.React.Fragment key={ index }>
            <div>
              <img src= { url } />
            </div>
            <div style={{height: '8px'}}/>
          </window.React.Fragment>
        )}
        <div>{ title }</div>
      </div>
      <div />
      <div >
        { buttons.map(({ title, type, value }, index) => (
          <window.React.Fragment key={ index }>
            <button 
              aria-label={ title }
              type='button' 
              title={ title }
              onClick={ () => {
                switch (type) {
                  case 'openUrl':
                    window.open(value)
                    break;
                  case 'postBack':
                    store.dispatch({
                      type: 'WEB_CHAT/SEND_POST_BACK',
                      payload: { value }
                    });
                    break;
                  default:
                    store.dispatch({
                      type: 'WEB_CHAT/SEND_MESSAGE_BACK',
                      payload: { value, text: value, displayText: value }
                    });
                }
              }}
            >
              <div title={ title }>
                { title }
              </div>
            </button>
            <div />
          </window.React.Fragment>
        ))}
      </div>
    </div>;

  (async function () {

    const res = await fetch('/directline/token', { method: 'POST' });
    const { token } = await res.json();
    const { createStore, ReactWebChat } = window.WebChat;
    const store = createStore();

    const attachmentMiddleware = () => next => card => {
      switch (card.attachment.contentType) {
        case 'application/vnd.microsoft.card.hero':
          return <HeroCardAttachment {...card.attachment.content} store={ store }/>;
        default:
          return next(card);
      }
    };

    window.ReactDOM.render(
      <ReactWebChat
        attachmentMiddleware={ attachmentMiddleware }
        directLine={ window.WebChat.createDirectLine({ token }) }
        store={ store }
      />,
      document.getElementById('webchat')
    );

    store.dispatch({
      type: 'WEB_CHAT/SET_SEND_BOX',
      payload: { text: 'sample:github-repository' }
    });

    document.querySelector('#webchat > *').focus();
  })().catch(err => console.error(err));
</script>

For more details regarding the attachment middleware, take a look at this sample.

Hope this helps.

Tool tip for long texts in Hero Cards

1 Answers