tooltip cut by div

Navigation
1

Good morning everyone. I'm trying to create a tooltip with only css in a side panel to the right of the page. In this panel a list of users appears and each tooltip presents a brief profile, very similar to the facebook user list where a tooltip with photo and user information appears with the mouseover. I have already done the tooltip and everything, however, when I use the overflow property the tooltip ends up cut by the parent div; the fact is that the list of users is large and needs a scroll. I've researched everywhere and I have not found a solution. Could someone help me with how to solve this problem? 

*{padding:0px;margin:0px;}
html, body{background:#000;overflow:hidden;}
.painel
{
    width:15%;
    position:absolute;
    right:0px;
    top:80px;
    bottom:0px;
    overflow: auto; /*só funciona com hidden */
    min-width:200px;
    background: blue;
}

#users_online ul{list-style-type:none;}
#users_online
{
    padding-left:5px;
    background: red;
}
#users_online ul li
{
    float:left;
    width:100%;
    border:1px solid transparent;
    padding:0px;
    margin-left:-1px;
    border-right:0;
    position:relative;
    white-space: nowrap;
}
#users_online ul li:hover{border-color:#999; background:linear-gradient(to right, #FFF, #000 160%);}
#users_online ul li a{text-decoration:none; float:left; width:70%; margin-left:10px;font-size:14px;color:#999;line-height:40px;}
#users_online ul li a .nome_titulo{line-height:20px;}
#users_online ul li a .nome_dados{font-size:12px;line-height:20px;}
#users_online ul li a p span.tipo_usuario{font-size:12px;text-transform:capitalize;font-weight:bold;}
#users_online ul li a:hover{color:#000;}

.imgSmall
{
    float:left;
    width:40px;
    height:40px;
    overflow:hidden;
    border-radius:50%;
}
.imgSmall img{width:100%; height:100%;}

.tooltip_usuario
{
    position:absolute;
}
a.tooltip_usuario span.toolinfo:hover{text-decoration:none;color:rgb(139,29,30);}
a.tooltip_usuario span.toolinfo{font-size:14px;display:none;padding:10px 10px;margin-top:-40px;margin-left:-350px;width:310px;line-height:15px;}
a.tooltip_usuario:hover span.toolinfo{display:inline;position:absolute;border:1px solid #000;background:#CCC;color:#000;z-index:1;}
<body>
<div class="painel">	
    <aside id="users_online">
        <ul>
            <?php for($i=1; $i<=20; $i++): ?>
            <li id="<?php echo $i ?>">
                <div class="imgSmall"><img src="fotos/" border="0" /></div>
                <a href="#" class="tooltip_usuario">     
                    <p class="nome_titulo">Nome Teste</p><p class="nome_dados"><span class="tipo_usuario">Usuario</span>/<span class="unidade_usuario">Adminitração</span></p>

                    <span class="toolinfo">
                        <div style="float:left; width:80px; padding-right: 10px;"><img src="fotos/" border="0" width="80" height="80" style="border-radius:50%;"/></div>
                        <div style="float:right; width:220px;">
                            <p><strong>Nome Teste</strong></p>
                            <p><strong>Usuario</strong></p>
                            <p>Administração</p>
                            <p><i>[email protected]</i></p>
                            <br/>
                            <p style="font-size: 12px;">Ultima vez online as 12:12 de 12/12/2012</p>
                        </div>
                    </span>
                </a>
                <span class="status off"></span>
            </li>
            <?php endfor; ?>
        </ul>
    </aside>
</div>
</body>
    
asked by anonymous 27.06.2016 / 19:54

1 answer

0

Good afternoon, Larissa, You have not commented on your code and I do not know if you are using (almost certainly, yes) the Bootstrap framework.

In the bootstrap there are two components similar to what you want to do.

I get the impression that what you really need is Popover.

To use them, you can run the following code: 

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Aqui vai o conteudo do seu popover">
  Popover à esquerda
</button>

The above code is the simplest way to run a popover. If you want more control, you can open them manually with JQuery: 

$('#element').popover('show')

Anyway, there are several possibilities for you to build a very cool popover. And most interesting of all, your popover is already responsive.

I hope you have helped, otherwise you can always comment on the answer to your questions.

    
27.06.2016 / 20:06
Dynamic checkbox that imports columns from tables in mysql PDF in ASP.Net c #