Как сверстать облако тегов на css?

#html #css #frontend

Сейчас готов кусок 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;
}

  Супер тег
  Еще один тег
  И еще тег
  Классный тег
  Вот тег последний





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

Ответы

Ответ 1

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



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)
}

  
    Супер тег
    text hide
  
  Еще один тег
  И еще тег
  Классный тег
  Вот тег последний



Ответ 2

Пример



* {
  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;
}

  
Супер тег
  
Супер тег
  
Супер тег
  
Супер тег
  
Супер тег
  
Супер тег
  
Супер тег
  
Супер тег
  
Супер тег



Ответ 3

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

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

.tags a:hover {
    background: linear-gradient(to top right, #f5755a, #f136ef);
}