my tooltip is cut off by the div container

Question

I have this code to make appear a tooltip when a message box is "hovered". All message boxes are inside a div called chatbox.

$('.box').hover(function(){
     var htmltooltip = '<div id="info" class="shadow">';
     htmltooltip += '<h4>Label info</h4>';
     htmltooltip += '<img src="images/defaultphoto.gif"/>';
     htmltooltip += '</div>';
     $(this).append(htmltooltip).children('#info').hide().fadeIn(400).css('left', -150);
     }, function() {
         $('#info').remove();
     }
   );

This is my css code to the chatbox, box and tooltip called #info

#chatbox {

    position: absolute;
    overflow-y:auto; 
    top:40%;
    left:50%;
    background:#fff;
    height:80%;
    width:550px;
    border:3px solid black;
    }
.box{
    width:90%;
    height:auto;
    margin:5px 20px 0px 0px;
    border:3px solid #918750;
    float:left;
    cursor: pointer;
}
#info{
    position:absolute;
    display:block;
    background:#7F7777;
    width:300px;
    padding-bottom: 0.5em;
    z-index:25;


}

My problem is that the tooltip is cut off by the chatbox div when pass the limits of the chatbox. Here is a jsfiddle: http://jsfiddle.net/Ifalcao/k9Yrc/2/

The overflow rule in the chatbox div must exist, otherwise if I have many message boxes, they will pass the limit of the chatbox. (http://jsfiddle.net/Ifalcao/URBDE) I need the message boxes inside the chatbox but the tooltips of the message boxes outside the chatbox.

Thanks in advance.

Can you post the HTML and a jsFiddle? – j08691 Apr 18 '13 at 18:58 — j08691, Apr 18 '13 at 18:58
Here it is: http://jsfiddle.net/Ifalcao/k9Yrc/2/ – Falcoa Apr 18 '13 at 20:36 — Falcoa, Apr 18 '13 at 20:36

score 3 · Answer 1 · answered Apr 18 '13 at 20:35

3

Remove the overflow-y:auto; rule from the #chatbox div and the tooltip is completely visible.

jsFiddle example

answered Apr 18 '13 at 20:35

j08691

204,283
31
260
272

3

Sorry, the problem persists because I need the overflow in the chatbox, otherwise if I have more message boxes, they will pass the limit of the chatbox. (http://jsfiddle.net/Ifalcao/URBDE/) I need the message boxes inside the chatbox but the tooltips outside the chatbox. – Falcoa Apr 18 '13 at 21:16

score 0 · Answer 2 · edited Sep 07 '16 at 13:43

0

add in tooltip css as overflow: visible;

edited Sep 07 '16 at 13:43

Martin Tournoij

26,737
24
105
146

answered Sep 07 '16 at 13:20

Rahul

128
1
14

my tooltip is cut off by the div container

2 Answers2