tooltip cut by div

Asked

Viewed 664 times

3

Good morning guys. I’m trying to create a css-only tooltip on a right-side panel of the page. In this panel appears a list of users and each tooltip presents a brief profile, quite similar to the facebook user list in which appears a tooltip with photo and user information with the mouseover. I already managed to make the tooltip and everything, however, when I use the overflow property the tooltip ends up cut by divParent; the fact is that the list of users is large and needs a scroll. I’ve searched everywhere and couldn’t find a solution. Someone could help me 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>

html css div tooltip

1 answer

0

Good afternoon Larissa, You didn’t get to comment on your code and I don’t know if you’re using (almost certainly, yes) the Bootstrap framework.

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

I have a feeling 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 be able to build a very cool Popover. And most interesting of all, your Popover is already responsive.

I hope it has helped, otherwise you can always comment on the answer with your questions.

  • Thank you so much for the tip Andrew, but I’m not using Bootstrap for some incompatibilities because I ended up opting for Jqueryui. but thanks for the tip. I will post my code below for some clarification

Browser other questions tagged html css div tooltip

You are not signed in. Login or sign up in order to post.