增加工具提示字符限制 - md-angular tooltip

Question

嗯，

我正在尝试使用 angular material 设计工具提示指令，但由于我的工具提示消息大小，我正面临一个问题，即完全显示。

我尝试查看 md 存储库，但找不到如何配置它

这是我正在尝试的代码：

<md-content >
  <md-button class="badge-blue">
    <span>?</span>
      <md-tooltip>
      This is the tootip message that i need to see, without ... 
    </md-tooltip>
  </md-button>
<md-content>

内容和按钮样式正在将宽度设置为 100%。

使用上面的消息，我只能看到："This is the tootip message that i ne..."

非常感谢任何帮助。谢谢！

Answer 1

这是您目前可以拥有的最大尺寸，angular-material.

上已经有人提出了制作此尺寸的要求

Make md-tooltip width a bit larger

Answer 2

您可以简单地 adjust/override 样式表：

Html:

<md-content >
  <md-button class="badge-blue">
    <span>?</span>
      <md-tooltip class="large">
      This is the tootip message that i need to see, without ... 
    </md-tooltip>
  </md-button>
<md-content>

Css:

md-tooltip.large .md-content {
    max-width: 500px; // Or whatever you need.
}

http://codepen.io/anon/pen/aOvWGb

Answer 3

我看到的解决方案只会使工具提示变长，但仍然在一行上。我更喜欢在 css:

上覆盖 white-space

md-tooltip .md-content{

  white-space: inherit;

}

增加工具提示字符限制 - md-angular tooltip

Increase tooltip character limit - md-angular tooltip

angularjs

material-design

angular-material