我已经尝试了几个小时让这个工作，尝试了多个解决的堆栈解决方案，但没有一个工作。
我假设我不是遗漏了什么，就是我的divs/spans不正确。 如有任何帮助，我们将不胜感激。 目前我的文本很小，bg颜色是灰色和略微透明。
此外，如果有可能使“信息”图标更小，这将是伟大的以及。 谢谢！
null
.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>null
试试这个
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
如果不工作，可以设置！重要。
希望有用
您可以使用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>
或登陆官网了解波普js:教程
