Balão no botão

[codercss 14]

Olá pessoal,

 

Estou a utilizar esta fantástica css: https://kazzkiq.github.io/balloon.css/

Acontece que estou problemas quando a integro no meu site.

 

O balão aparece mas desaparece em baixo dos outros elementos. Penso que tem haver com os parâmetro position, talvez esteja a entrar em conflito com os que já tinha configurado. Sei que encontrar a solução assim à distância é um pouco difícil, mas acontece que apenas consigo passar essa parte do código.

 

<li><a href="" data-balloon="Whats up!" data-balloon-pos="left" data-balloon-length="medium"><img src="img/return.png"><p></p></a></li>

 

Mais uma nota. Uma vez que não pretendo utilizar essa css no button, alterei a tag de button para a, na css. Já testei em todas as tags da árvore de css mas o resultado é sempre o mesmo!

O que poderá ser a causa desse desaparecer por de baixo de outro elemento?

 

Segue uma imagem do elemento onde deve aparecer o bolão. https://snag.gy/Eux0nd.jpg

Essa barra de botões fica na lateral da página e acompanha toda a rolagem de página

 

Obrigado

[Pita 53]

Procura sobre z-index, é ele que controla a ordem de qual elemento fica na frente de qual elemento

[codercss 14]

Os locais onde aparece isso é:

[data-balloon]:after {
    filter: alpha(opactiy=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.18s ease-out 0.18s;
    -moz-transition: all 0.18s ease-out 0.18s;
    -ms-transition: all 0.18s ease-out 0.18s;
    -o-transition: all 0.18s ease-out 0.18s;
    transition: all 0.18s ease-out 0.18s;
    font-family: sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-shadow: none !important;
    font-size: 12px !important;
    background: rgba(17, 17, 17, 0.9);
    border-radius: 4px;
    color: #fff;
    content: attr(data-balloon);
    padding: .5em 1em;
    position: absolute;
    white-space: nowrap;
    z-index: 20; }
  [data-balloon]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 18px;
    height: 6px;
    filter: alpha(opactiy=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.18s ease-out 0.18s;
    -moz-transition: all 0.18s ease-out 0.18s;
    -ms-transition: all 0.18s ease-out 0.18s;
    -o-transition: all 0.18s ease-out 0.18s;
    transition: all 0.18s ease-out 0.18s;
    content: '';
    position: absolute;
    z-index: 20; }

 

Já coloquei tudo mais alto, a 20000 por exemplo e não resulta. Coloquei a 20000 pois tenho um zindex num outro css a 10000

[codercss 14]

A linha que tenho a 10000 é esta:

.CodeMirror-lint-tooltip { background-color: infobackground; border: 1px solid black; border-radius: 4px; color: infotext; font-family: monospace; overflow: hidden; padding: 2px 5px; position: fixed; white-space: pre-wrap; z-index: 10000; max-width: 600px; opacity: 0; transition: opacity 0.4s; font-size: 0.8em; }