Я устанавливаю "placement:top" для всплывающей подсказки, но всплывающая подсказка помещается в верхнюю начальную позицию (возможно, из-за заполнения)

Функция вызова


$($copy_button[0]).on("click", (event) => {
            show_tooltip($copy_button);
        });

Вызываемая функция


export function show_tooltip($copy_button) {
    // Display a tooltip to notify the user the version was copied.
    const instance = tippy($copy_button[0], {
        placement: 'top',
        onUntrigger() {
            remove_instance();
        },
    });
    instance.setContent("Copied!");
    instance.show();
    function remove_instance() {
        if (!instance.state.isDestroyed) {
            instance.destroy();
        }
    }
    setTimeout(remove_instance, 3000);
}

На изображении 1 скопировано! размещение подтверждения странное, и я хотел бы сделать его таким же, как на изображении 2. «Скопировано» отображается при нажатии.

Я устанавливаю "placement:top" для всплывающей подсказки, но всплывающая подсказка помещается в верхнюю начальную позицию (возможно, из-за заполнения)

Здесь код копирования будет отображаться при наведении курсора, и его размещение идеально.

Это структура коробки для изображения.

Я просто хочу "Скопировано!" всплывающая подсказка должна быть размещена так же, как и всплывающая подсказка «Копировать код». Но почему-то "Скопировано!" размещение всплывающей подсказки странное. Заранее спасибо.

Что произойдет, если вы измените «Скопировано!» текст на что-то более длинное (например, Lorem ipsum sit dolor amet)? Остается ли размещение таким же, как для Copied!? Кроме того, как насчет непосредственного родителя как всплывающей подсказки Copy code, так и всплывающей подсказки Copied!? Это тот же элемент DOM?

— 22.12.2022 22:27

Эй, кажется, что непосредственный родитель был проблемой, мне просто нужно было добавить ``` appendTo: () => document.body ``` в часть кода, чтобы получить результат. Огромное спасибо за помощь.

— 24.12.2022 12:33

javascript jquery tooltip tippyjs

22.12.2022 10:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

export function show_tooltip($copy_button) {
    // Display a tooltip to notify the user the version was copied.
    const instance = tippy($copy_button[0], {
        placement: 'top',
        appendTo: () => document.body,           //Just added this line.
        onUntrigger() {
            remove_instance();
        },
    });
    instance.setContent("Copied!");
    instance.show();
    function remove_instance() {
        if (!instance.state.isDestroyed) {
            instance.destroy();
        }
    }
    setTimeout(remove_instance, 3000);
}

Добавление элемента в document.body помогает решить эту проблему.

24.12.2022 12:37