Как я могу добавить границу к стрелке в реагирующей подсказке v5?
Как добавить рамку к стрелке в react-tooltip v5?
Когда я указываю границу с помощью classNameArrow, она не работает как это.
Я хочу отобразить границу, как это.
Я также хотел бы рассмотреть, когда место всплывающей подсказки также отличается от верхнего.
Вот пример кода.
Ответы 2
Вы можете просто сделать:
.example-arrow {
border: 1px solid black;
border-bottom:0px;
border-right:0px;
}
Добавьте margin-top: -1px;, если хотите, чтобы это выглядело лучше.
Стрелка — это просто повернутый квадрат, поэтому вам нужно установить разные стили (попробуйте использовать с границей слева и границей сверху) для других позиций.
Спасибо. Однако таким образом, когда место всплывающей подсказки отличается от верхнего, все идет не так.
Я добавил немного пояснений к другим позициям. Попробуйте установить разные имена классов для разных позиций, используя разные комбинации border-bottomborder-leftborder-right и border-top.
Этот метод может быть сложным из-за автоматической смены места в некоторых местах. Я рассмотрю возможность ликвидации границы. Спасибо.
Вот класс CSS, который вам нужен.
.example-arrow {
border-top: 1px solid black;
border-left: 1px solid black;
}
Оказывается, classNameArrow по умолчанию представляет собой прямоугольник (квадрат), повернутый по часовой стрелке на 45 градусов.
Спасибо. Однако таким образом, когда место всплывающей подсказки отличается от верхнего, все идет не так.
@Yusa Ты прав, я не думал об этом. Вы пытались сделать границы всплывающей подсказки и стрелки прозрачными? Это заставляет его выглядеть довольно хорошо для меня и, возможно, именно так оно и было предназначено для использования.
Может быть, так было бы лучше... Спасибо!
Просто для справки https://github.com/ReactTooltip/react-tooltip/issues/998