Блог

Я использую NVD3 1.8 для построения графиков, и я внедрил пользовательскую всплывающую подсказку, потому что нашему отделу визуального дизайна не понравилась та, с которой поставляется библиотека. Я смог реализовать большую часть дизайна, но у меня есть одна проблема:

Стрелка во всплывающей подсказке должна указывать на направляющую, находится ли она справа или слева. Я сделал эту стрелку с помощью CSS, и я могу легко добавить класс, чтобы переместить его на другую сторону, но проблема заключается в том, чтобы выяснить, когда применять класс. Когда мышь пользователя приближается слишком близко к правой части экрана, transform: translation() значение всплывающей подсказки изменяется таким образом, что она отображается слева от мыши, а не справа.

Это делается на основе ширины всплывающей подсказки, А НЕ статического расстояния от правого края экрана (я знаю это, потому что размер моей всплывающей подсказки динамически изменяется в зависимости от ее содержимого, а всплывающая подсказка, расположенная дальше слева, иногда может быть перевернута влево при наличии больших числовых значений). Я не знаю, как получить доступ к информации «flip» программно, поскольку, похоже, эта проверка выполняется после того, как всплывающая подсказка уже отображена. Как я могу обойти эту головоломку?

Можно ли просто решить, что если ориентир находится в правой части экрана, то переместите всплывающую подсказку влево, а если она находится на левой стороне, переместите всплывающую подсказку вправо?

Вы могли бы выполнить вычисление, в котором вы просто берете ширину / 2. Это то, что я делаю всякий раз, когда у меня есть всплывающая подсказка. Я также перемещаю всплывающую подсказку под курсором, когда она находится в верхней части страницы, и перемещаю всплывающую подсказку над курсором, когда она находится в нижней части страницы

Надеюсь, это поможет.