如何更新工具提示的字体大小和背景颜色并使其图标变小？

Question

我已经尝试了几个小时来让它工作，尝试了多个已解决的堆栈解决方案并且 none 已经奏效了。

我假设我遗漏了一些东西或者我的 divs/spans 不正确。任何帮助将不胜感激。目前我的文字很小，背景颜色是灰色，略微透明。

此外，如果可以将“信息”图标做得更小，那也很棒。谢谢！

  .mainContainer {
    width: 40%;
    float: left;
  }
  
    .info {
    display: flex;
  }

  .info .span {
    align-self: center;
  }

  .info-button{
    padding: 0;
    border: none;
    background: none;
    outline: none;
    background-color: transparent;
    top:-10px;
  }

      <div class="mainContainer">
        <h3>Main Title</h3>
        <div class="info">
          <h5>Title</h5><span class="info-span">
            <button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text">
            <mat-icon color="basic" >info</mat-icon>
            </button>
            </span>
        </div>
      </div>

Answer 1

试试这个

::ng-deep .mat-tooltip {
    background-color: transparent;
    font-size: 12px;
}

不生效可以设置!important

希望有用

Answer 2

您可以使用 popper js 来集成和设置工具提示的样式，这很简单：这是文档中的一个快速示例：

<!DOCTYPE html>
<title>Popper example</title>

<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>

<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>

或访问官网了解popper js :Tutorial

如何更新工具提示的字体大小和背景颜色并使其图标变小？

How can I update the font size and background color of my Tooltip and make its icon smaller?

html

css

tooltip

angular