Как добавить стрелки в matTooltip?
Пытаюсь добавить стрелки на matTooltip, есть способ добавить стрелки на matTooltip.
<button mat-raised-button
matTooltip = "Info about the action"
aria-label = "Button that displays a tooltip when focused or hovered over">
Action
</button>
Стрела? Что за стрелка? Что вы подразумеваете под «стрелками»?
Я говорю о стрелках подсказки! Ниже приведен пример всплывающей подсказки со стрелками, которую я хочу добавить в matooltip. ng-bootstrap.github.io/#/components/tooltip/examples
Есть ли решение тем временем?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
После использования Material Design стрелки не включаются в угловой компонент всплывающей подсказки. Здесь вы можете посмотреть, что можно делать и чего нельзя делать с помощью всплывающих подсказок https://material.io/components/tooltips/
Должен сказать, я не думаю, что это было хорошее решение со стороны разработчиков Material Design.
Вам необходимо переопределить стили материалов. и добавить до / после псевдоэлемента в виде стрелки. Например, если вам нужно стилизовать всплывающую подсказку с левой границей и стрелкой, просто сделайте что-то вроде этого
.mat-tooltip {
// to make possible place arrow pseudo element outside tooltip with absolute positioning
overflow: visible;
position: relative;
&.right {
border-left: 6px solid red;
margin-left: 5px;
&::before {
position: absolute;
content: '';
display: inline-block;
background-color: red;
clip-path: polygon(50% 0, 0 50%, 50% 100%);
left: -12px;
width: 15px;
height: 15px;
top: 50%;
transform: translateY(-50%);
}
}
}
Да! как мы видим во всплывающей подсказке начальной загрузки!