Пост Создание пользовательского компонента всплывающей подсказки в Vue впервые появился на Qvault.

Существует множество библиотек, которые за считанные минуты заставят вас работать с хорошим решением для всплывающей подсказки. Однако, если вы похожи на меня, вы устали от гигантских деревьев зависимостей, которые могут сломаться в любой момент. По этой причине мы собираемся создать собственный компонент всплывающей подсказки для одного файла, который вы можете создать самостоятельно и настроить по своему усмотрению. Это может занять 15 минут вместо 3… извините за это.

Как оказалось, это также шаблон для компонента всплывающей подсказки, который мы используем в приложении для кодирования Qvault.

Конечная цель

Мы создаем компонент с одним файлом, поэтому это будет один файл со следующей структурой:

<template>
  
</template>

<script>

</script>

<style scoped>

</style>

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

HTML

<template>
  <div class="tooltip-box">
    <slot />
    <div
      class="tooltip"
    >
      <span
        class="text"
      >{{ text }}</span>
    </div>
  </div>
</template>

Здесь довольно простая установка. Нам нужно:

  • Внешний tooltip-box для инкапсуляции всего компонента и обеспечения позиционирования.
  • Тег слота для внедрения дочернего компонента (независимо от того, на что наведен курсор, чтобы отобразить всплывающую подсказку).
  • A span, в котором будет размещаться текст нашей всплывающей подсказки.

JavaScript

export default {
  props: { 
    text: {
      type: String,
      required: true
    }
  }
};

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

CSS

.tooltip-box { 
  position: relative;
  display: inline-block;
}

.tooltip-box:hover .tooltip{
  opacity: 1;
}

.tooltip { 
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 2px;
  
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 1s;

  position: absolute;
  z-index: 1;

  background: #a782e8;
}

.text::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #a782e8 transparent transparent transparent;
}

CSS, безусловно, самая интересная часть. Пара ключевых моментов:

  • Нам нужно убедиться, что элемент верхнего уровня, tooltip-box, расположен относительно, чтобы наше абсолютное позиционирование работало.
  • Мы используем переход непрозрачности, чтобы всплывающая подсказка появлялась и исчезала из поля зрения.
  • Свойство z-index гарантирует, что всплывающая подсказка находится поверх того, над чем нужно навести курсор.
  • Свойство .text::after создает маленький треугольный указатель в нижней части всплывающей подсказки.

Полный компонент:

<template>
  <div class="tooltip-box">
    <slot />
    <div
      class="tooltip"
    >
      <span
        class="text"
      >{{ text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: { 
    text: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
.tooltip-box { 
  position: relative;
  display: inline-block;
}

.tooltip-box:hover .tooltip{
  opacity: 1;
}

.tooltip { 
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 2px;
  
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 1s;

  position: absolute;
  z-index: 1;

  background: #a782e8;
}

.text::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #a782e8 transparent transparent transparent;
}
</style>

И как его использовать:

<Tooltip
  text="Difficulty"
 >
   <span> hover over me </span>
 </Tooltip>

Спасибо за чтение!

Подпишитесь на нас в Твиттере @q_vault, если у вас есть какие-либо вопросы или комментарии

Пройдите игровые курсы кодирования в Qvault Classroom

Подпишитесь на нашу рассылку, чтобы получать больше образовательных статей

Статьи по Теме