Angular UI-Select：如何为文本溢出添加工具提示？

Posted 2023-05-08

【中文标题】Angular UI-Select：如何为文本溢出添加工具提示？

【英文标题】：Angular UI-Select: How to add a tooltip for text overflow?

【发布时间】：2015-12-17 05:22:46

【问题描述】：

我有一个 ui-select-match 元素，当打开元素并悬停（突出显示）一行时，我需要一个工具提示来显示该行的全部内容，以防文本溢出被边框截断.

这似乎应该是 ui-select 的一个功能，但我找不到任何关于这样的东西的参考。到目前为止，我只找到了在行内显示整个文本的解决方案。

谢谢！

【参考方案1】：

将title="selected.name" 放在包含ui-select-match 指令的元素上怎么样？无论如何，工具提示都会出现，不仅是在文本溢出时。

代码：

<ui-select ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             style="width: 300px;">
    <ui-select-match title="address.selected.formatted_address" placeholder="Enter an address...">$select.selected.formatted_address</ui-select-match>
    <ui-select-choices repeat="address in addresses track by $index"
             refresh="refreshAddresses($select.search)"
             refresh-delay="0">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

见plnkr

【讨论】：

感谢您的回答。我认为它是一种选择，但我需要工具提示仅显示文本溢出。