Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Cerbfenix

Posição do tooltip

Por , em Desenvolvimento frontend

Recommended Posts

Cerbfenix    0

Cerbfenix
Postado

Estou com um problema que é o seguinte não estou conseguindo posicionar o tooltip em cima dos links com fundo cinza que ficam ao lado. o posicionamento dele aparecer no lado direito ta certo mais a lista que está ao lado diretio fica na frente dos tooltips da lista a esquerda ja tentei com o z-index mais nada acontece ele sempre permanesce atraz....

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">
#link {
	margin: 20px auto 0 10px;
	width: 140px;
	float:left;
}
.has-tooltip {
	background:#CCC;
    color: #555;
    cursor: pointer;
    font-family: "Gill Sans", Impact, sans-serif;
    font-size: 12px;
    margin: 5px auto;
    padding: 5px 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    -webkit-transform: translateZ(0); /* webkit flicker fix */
    -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.has-tooltip .tooltip {
    background: #1496bb;
    bottom: -180%;
    color: #fff;
    display: block;
    left: 150px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    position: absolute;
    visibility: hidden;
    width: 100%;
    -webkit-transform: translateY(10px);
       -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
         -o-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
         -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.has-tooltip .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.has-tooltip .tooltip:after {
    border-left: solid #1496bb 10px;
    border-top: solid #1496bb 28px;
    bottom: 35px;
    content: " ";
    height: 0;
    left: 0%;
    margin-left: -10px;
    position: absolute;
    width: 0;
}
  
.has-tooltip:hover .tooltip {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
         -o-transform: translateY(0px);
            transform: translateY(0px);
}
/* ROLL LINKS */
a.roll-link {text-decoration:none; color:#CCC;}
.roll-link {
	font: 14px "Ubuntu Condensed";
    display: inline-block;
    overflow: hidden;

    vertical-align: top;

    -webkit-perspective: 600px;
       -moz-perspective: 600px;
       -ms-perspective: 600px;
       perspective: 600px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
       perspective-origin: 50% 50%;
       
}

.roll-link:hover {text-decoration:none;}

.roll-link span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
       -ms-transition: all 400ms ease;
       transition: all 400ms ease;
    
    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
       transform-style: preserve-3d;
}
.roll-link:hover span {
        background: #DD4D42;
         

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

.roll-link span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;

    color: #fff;
    background: #DD4D42;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
.black { color:#000; font: 14px "Ubuntu Condensed";}
.black small { color:#F00; font-weight:bold;}
</style>
</head>

<body>
<div id="link">
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>

</div><!-- link -->

<div id="link">
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>

</div><!-- link -->

<div id="link">
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>
<div class="has-tooltip">
   I have a tooltip <span class="black">(<small>27</small>)</span>
    <span class="tooltip">
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
     <li><a href="#" class="roll-link" rel="nofollow"><span data-title="LINK EFEITO HOUVER">LINK EFEITO HOUVER</span></a></li>
    </span>
</div>

</div><!-- link -->
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado

Você colocou z-index aonde?

 

Eu coloquei aqui : .has-tooltip:hover .tooltip e funcionou

 

.has-tooltip:hover .tooltip { opacity: 1;    z-index:9999999;    visibility: visible;    -webkit-transform: translateY(0px);       -moz-transform: ranslateY(0px);        -ms-transform: translateY(0px);         -o-transform: translateY(0px);            transform: translateY(0px); {

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cerbfenix    0

Cerbfenix
Postado
  • bruno_mosciatti

Não funcionou pois por este motivo que vim edir ajuda pois não interessa onde eu coloque o z-index que mesmo assim o tooltip permanesce atraz da lista que fica ao lado direito a ultima lista fica certo pois não tem mais conteúdo mais das duas primeiras fica por tráz :S

 

mais agradeço a atençao e ajuda :yes:

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado

 

  • bruno_mosciatti

Não funcionou pois por este motivo que vim edir ajuda pois não interessa onde eu coloque o z-index que mesmo assim o tooltip permanesce atraz da lista que fica ao lado direito a ultima lista fica certo pois não tem mais conteúdo mais das duas primeiras fica por tráz :S

 

mais agradeço a atençao e ajuda :yes:

 

qual navegador? ie7?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito