4

Сейчас готов кусок html и css к нему, но верстка не соответствует макету и непонятно, как сделать hover при наведении и всплывающую подсказку над тегом.

.tags {
  padding: 80px;
  width: 380px;
  /* Style for "jQuery" */
  color: #ffffff;
  font-family: Roboto;
  font-size: 17px;
  font-weight: 300;
  line-height: 40px;
}

.tags a {
  white-space: nowrap;
  /* Style for "Rounded Re" */
  width: auto;
  border-radius: 13px;
  background-color: #090a0b;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  color: #ffffff;
}
<div class="tags">
  <a href="#">Супер тег</a>
  <a href="#">Еще один тег</a>
  <a href="#">И еще тег</a>
  <a href="#">Классный тег</a>
  <a href="#">Вот тег последний</a>
</div>

При этом на выходе должно получится облако тегов с возможностью раскрыть его и при наведении hover с подсказкой https://yadi.sk/i/t7ATcCq23SqXoq

2
  • с :hover то в чем проблема? тултипы через js
    – teran
    27 фев 2018 в 19:50
  • непонятно как это реализовать 27 фев 2018 в 19:53

3 ответа 3

5

ну вот как вариант

body {
  background: #1e2429;
}
.tags {
  padding: 80px;
  width: 380px;
  /* Style for "jQuery" */
  color: #ffffff;
  font-family: Roboto;
  font-size: 17px;
  font-weight: 300;
  line-height: 40px;
}

.tags a {
  white-space: nowrap;
  /* Style for "Rounded Re" */
  width: auto;
  border-radius: 13px;
  background-color: #090a0b;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  color: #ffffff;
  
  position: relative; /* для подсказки */
}

/* это нужно, если есть необходимость что бы можно было навести курсор на подсказку. Иначе будет исчезать */
.tags a:after { 
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
  visibility: hidden;
}
.tags a:hover:after {
  visibility: visible;
}
.tags a:hover {
  background: #eb1f63;
}

/* оформление плашки */
.tags__hide {
  position: absolute;
  left: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  background: #fff;
  padding: 5px 10px;
  line-height: 1;
  transition: all .3s;
  
  /* параметры для изчезновения/появления. Можете настроить как вам угодно */
  visibility: hidden;
  opacity: 0;
  bottom: 0;
}
.tags a:hover .tags__hide {
  visibility: visible;
  opacity: 1;
  bottom: calc(100% + 15px);
}
/* треугольник */
.tags__hide:before {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
  transform: rotate(45deg)
}
<div class="tags">
  <a href="#">
    Супер тег
    <span class="tags__hide">text hide</span>
  </a>
  <a href="#">Еще один тег</a>
  <a href="#">И еще тег</a>
  <a href="#">Классный тег</a>
  <a href="#">Вот тег последний</a>
</div>

5

Пример

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tags-list {
  padding: 20px;
  margin: 25px 0;
}

.tags-list>li {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-bottom: 5px;
}

.tags-list>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  border-radius: 15px;
}

.tags-list>li>a:hover {
  background: #f00;
}

.tags-list>li>a[data-tooltip]:before {
  position: absolute;
  left: 50%;
  top: -100%;
  background: #ccc;
  color: #000;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  content: attr(data-tooltip);
  white-space: nowrap;
  transform: translateX(-50%);
}

.tags-list>li>a[data-tooltip]:after {
  position: absolute;
  left: 50%;
  top: -10px;
  margin-left: -7px;
  border-top: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
}

.tags-list>li>a[data-tooltip]:before,
.tags-list>li>a[data-tooltip]:after {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease;
}

.tags-list>li>a[data-tooltip]:hover:after,
.tags-list>li>a[data-tooltip]:hover:before {
  visibility: visible;
  opacity: 1;
}
<ul class="tags-list">
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
  <li><a href="#" data-tooltip="ToolTip">Супер тег</a></li>
</ul>

-1

Можно попробовать добавить псевдоэлемент ::before и скрыть его display: none;, а при наведении display: block;, скачать иконочный шрифт в виде всплывающего облака, но не уверен, надо проверять.

При наведении:

.tags a:hover {
    background: linear-gradient(to top right, #f5755a, #f136ef);
}
1
  • Если не уверены, то лучше не отвечайте:)
    – Arthur
    27 фев 2018 в 20:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.