向 angular material 工具提示箭头添加阴影
Adding shadow to angular material tooltip arrow
我正在尝试向 angular material 工具提示箭头添加阴影,但无法做到。如果您在 stackblitz 中看到,我已经用箭头自定义了工具提示,但无法为箭头添加阴影。
我的工具提示 CSS:
::ng-deep .tooltip-class {
background-color: #ffffff !important;
opacity: 1;
color: rgba(0, 0, 0, 0.87) !important;
margin: 0 8px;
padding: 8px 12px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
border-radius: 6px;
overflow: visible !important;
box-shadow: 0px 1px 2px #00000029, 0px 2px 4px #0000001f,
0px 1px 8px #0000001a;
}
::ng-deep .tooltip-class:before {
border-right-color: white !important;
}
::ng-deep .tooltip-class:after {
content: '';
position: absolute;
top: 40%;
right: 100%;
margin-top: -5px;
border-width: 10px;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
我正在尝试向 angular material 工具提示箭头添加阴影,但无法做到。如果您在 stackblitz 中看到,我已经用箭头自定义了工具提示,但无法为箭头添加阴影。
我的工具提示 CSS:
::ng-deep .tooltip-class {
background-color: #ffffff !important;
opacity: 1;
color: rgba(0, 0, 0, 0.87) !important;
margin: 0 8px;
padding: 8px 12px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
border-radius: 6px;
overflow: visible !important;
box-shadow: 0px 1px 2px #00000029, 0px 2px 4px #0000001f,
0px 1px 8px #0000001a;
}
::ng-deep .tooltip-class:before {
border-right-color: white !important;
}
::ng-deep .tooltip-class:after {
content: '';
position: absolute;
top: 40%;
right: 100%;
margin-top: -5px;
border-width: 10px;
border-style: solid;
border-color: transparent #fff transparent transparent;
}