Botframework 英雄卡中长文本的工具提示

我正在使用Bot框架Webchat（基于React）。我使用卡片动作（英雄卡）来建议一系列类似的问题。有时英雄卡中的文字可能太长。在这种情况下，文本被截断并替换为三个点。是否可以为英雄卡提供工具提示

我查看了代码中的

HeroCard

选项，但没有找到任何相关内容

我在Github上提出了这个问题：

有什么帮助吗？

网络聊天利用NPM包渲染卡片，不幸的是，自适应卡片不支持向卡片中的元素添加工具提示说明。然而，GitHub上有几个关于添加工具提示功能的开放版本，所以希望该功能很快可以在网络聊天中使用

即使自适应卡不支持添加工具提示，您也可以为Web聊天创建自定义附件中间件，并实现自己的英雄卡渲染器。下面的代码片段显示了一个没有任何样式的基本英雄卡渲染器

<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>

const HeroCardAttachment=（{按钮、图像、标题、存储}）=>
{images.map（{url}，index）=>
)}
{title}
{buttons.map（{title，type，value}，index）=>(
{
开关（类型）{
案例“openUrl”：
窗口打开（值）
打破
“回发”案例：
仓库调度({
键入：“网络聊天/发送邮件”，
有效负载：{value}
});
打破
违约：
仓库调度({
键入：“网络聊天/发送消息”，
有效负载：{value，text:value，displayText:value}
});
}
}}
>
{title}
))}
;
（异步函数（）{
const res=wait fetch（'/directline/token'，{method:'POST'}）；
const{token}=await res.json（）；
const{createStore，ReactWebChat}=window.WebChat；
const store=createStore（）；
const attachmentMiddleware=（）=>next=>card=>{
开关（卡.附件.内容类型）{
案例“application/vnd.microsoft.card.hero”：
回来
违约：
返回下一张（卡片）；
}
};
window.ReactDOM.render(
,
document.getElementById（'webchat'）
);
仓库调度({
键入：“网络聊天/设置发送框”，
有效负载：{text:'sample:github存储库'}
});
document.querySelector（“#webchat>*”）.focus（）；
})（）.catch（err=>console.error（err））；

有关附件中间件的更多详细信息，请查看以下内容

---

希望这能有所帮助。

希望你能成功。如果您觉得我的回答足够，请“接受”它，以便我可以从我的支持跟踪器中清除此票据。如果没有，让我知道我还能提供什么帮助！