Now a piece of html and css is ready for it, but the layout does not match the layout and it is not clear how to make a hover when hovering and a tooltip above the tag.

 .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>

In this case, the output should get a tag cloud with the ability to open it and hover with a hint https://yadi.sk/i/t7ATcCq23SqXoq

  • c :hover then what's the problem? tooltips through js - teran
  • it is not clear how to implement it - Igor Mamontov

3 answers 3

Well, as an option

 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>

    Example

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

      You can try to add the pseudo-element ::before and hide its display: none; , and when you hover display: block; , download ikonochnym font in the form of a pop-up cloud, but not sure, you need to check.

      When hovering:

       .tags a:hover { background: linear-gradient(to top right, #f5755a, #f136ef); }
      • If you are not sure, it is better not to answer :) - Arthur