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

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

html css angular

Html 如何更新工具提示的字体大小和背景色，并使其图标变小？,html,css,angular,tooltip,Html,Css,Angular,Tooltip,我已经尝试了几个小时，试图让这个工作尝试多个解决堆栈解决方案，但没有一个工作我假设我遗漏了什么，或者我的div/span不正确。任何帮助都将不胜感激。目前我的文字很小，背景颜色是灰色的，略微透明此外，如果有可能使“信息”图标更小，这将是伟大的以及。谢谢大家! .main容器{ 宽度：40%；浮动：左； } .info{ 显示器：flex； } .info.span{ 自对准：居中； } .info按钮{ 填充：0；边界：无；背景：无；大纲：无；背景色：透明；顶部：-10px；

我已经尝试了几个小时，试图让这个工作尝试多个解决堆栈解决方案，但没有一个工作

我假设我遗漏了什么，或者我的div/span不正确。任何帮助都将不胜感激。目前我的文字很小，背景颜色是灰色的，略微透明

此外，如果有可能使“信息”图标更小，这将是伟大的以及。谢谢大家!

.main容器{
宽度：40%；
浮动：左；
}
.info{
显示器：flex；
}
.info.span{
自对准：居中；
}
.info按钮{
填充：0；
边界：无；
背景：无；
大纲：无；
背景色：透明；
顶部：-10px；
}


主标题
标题
信息

试试这个

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


波普尔示例
#工具提示{
背景色：#333；
颜色：白色；
填充物：5px10px；
边界半径：4px；
字体大小：13px；
}
我是一颗纽扣
我是一个工具提示
const button=document.querySelector（“#button”）；
const tooltip=document.querySelector（“#tooltip”）；
//传递按钮、工具提示和一些选项，Popper将执行以下操作
//神奇的定位：
创建Popper（按钮、工具提示、{
位置：'对'，
});

或者访问官方网站了解popper js:

哇，这非常有效，谢谢。我认为ng deep不受欢迎，所以我甚至没有想过尝试它。谢谢