CSS Dotstyle навигации вопрос

Question

Я работаю на этой странице, глядя реализовать dotstyle навигации справа:

http://aliantesolution.it/chi_new.php

Для того, чтобы сделать это, я использовал этот инструмент: http://tympanus.net/Development/DotNavigationStyles/

Ссылка - это флаг, который появляется при переносе на точку, но мне нужна ссылка как сама точка, потому что она более интуитивно понятна для пользователя. Кто-то знает, как я могу это сделать?

Я просто попытался изменить код, как

<a href="#link><li>caption</li></a> 

делает это я получаю точки, работающие в качестве ссылки, но без флага.

Большое спасибо!

Answer 1

сделал это, я поместил элементы LI в A и использовал атрибут «title» для всплывающей подсказки. Код для пояснения:

<div class="dotstyle"> 
         <ul> 
          <a title="chi" class="tooltip" href="#chisiamo"> 
          <li title="chi"></li> 
          </a> 
          <a title="organizzazione" class="tooltip" href="#organizzazione"> 
          <li title="organizzazione"></li> 
          </a> 
          <a title="etica" class="tooltip" href="#etica"> 
          <li title="etica"></li> 
          </a> 
          <a title="mission" class="tooltip" href="#mission_but"> 
          <li title="mission"></li> 
          </a> 
         </ul> 
    <div> 

    .dotstyle ul { 
    width: 9px; 
    position: fixed; 
    right: 70px; 
    top:45%; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    cursor: default; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    z-index:50; 
} 

.dotstyle li { 
    border: 2px solid #FD4F00; 
    border-radius: 50%; 
    z-index: 1; 
    position: relative; 
    display: block; 
    float: left; 
    margin: 10px 0; 
    width: 8px; 
    height: 8px; 
    cursor: pointer; 
} 
.dotstyle a { 
    text-decoration: none; 
} 

.tooltip{ 
    display: inline; 
    position: relative; 
} 

.tooltip:hover li:after{ 
    position:absolute; 
    background: #FD4F00; 
    bottom: 26px; 
    color: #fff; 
    content: attr(title); 
    top: auto; 
    bottom: -82%; 
    right: 370%; 
    padding: 5px 15px; 
    z-index: 98; 
    font-weight: 900; 
    text-transform: uppercase; 
    font-size: 11px; 
} 

.tooltip:hover li:before{ 
    border: solid; 
    border-color: transparent; 
    border-left-color: #FD4F00; 
    border-width: 6px; 
    bottom: -20%; 
    content: ""; 
    left: -270%; 
    position: absolute; 
    z-index: 99; 
    -webkit-transition: opacity 0.3s ease; 
    transition: opacity 0.3s ease; 
}