CODEWITHSUNDEEP
javascriptjquerycsshtml
Alex
Alex

Reputation: 161

Tooltip Div is not show when hover

I have used belwo the code for show the details when hover but the div is moving to left side but bioinfo is not show so can you please guide? how to implement this in jquery.

in html file

  <ul class="ch-grid">
    <li>
    <div class="ch-item ch-img-1">
     <div class="ch-info">  </div>
    </div>

     <div class="bioinfo">
        <h2>Details of the image initially it should hide</h2>
     </div>
    </li>
    </ul>

in css file

css file

.ch-grid li .person-profile nav ul li {
    display: inline-block !important;
    height: 56px !important;
    margin: 0px !important;
    width: 36px !important;
}


.ch-img-1 { 
    background-image: url(../images/image.png);
}


.bioinfo {
    display: none;
    background: rgba(246,246,246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}

In Jquery

$('.ch-grid > li').hover(function() {
                $(this).animate({ marginRight: 120 });
                $(this).children('.bioinfo').show();
    }, function() {
            $(this).animate({ marginRight: 0 });
        $('.bioinfo').hide();

    });

how to show the bioinfo when hover.

Upvotes: 0

Views: 997

Answers (2)

SW4
SW4

Reputation: 71150

If you simply want to show .bioinfo on hover, see

FIDDLE

You shouldn't need any jQuery to do this- but I see you are using an animation which you may want to incorporate into the CSS. You can toggle hover behaviour by using the :hover pseudo class in CSS.

CSS

.bioinfo {
    display: none;
    max-height: auto;
    max-width: 220px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(108, 108, 108, 0.5) 5px 5px 5px;
    border: 2px solid #ccc;
    position: absolute;
    z-index: 100;
    /*    background: #eeeded; f6f6f6*/
    background: rgba(246, 246, 246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}
li:hover .bioinfo {
    display:block;
}

Upvotes: 2

NoobEditor
NoobEditor

Reputation: 15881

Except for broken tags, Your code is fine. Keeping your markup same, remove right: -150px; from class bioinfo and change top:150px to top:0in you css and it works just fine.here is WORKING CODE

Upvotes: 0

Related Questions