tool_tip1

by Nidhi Soni

HTML

<div class="ful">click me
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul><div class="tip">hello</div>
</div>

CSS

.ful{
    background: #f00;
    width:100px;
    height:30px;
    text-align:center;
    position:relative;
}
ul{
    display:none;
    list-style:none;
    background:pink;
}
li:nth-child(2n+1){
    background:#cdcdcd;
}
.tip{
    display: none;
    position:absolute;
    background:green;
    right: -33px;
    padding:3px;
}

JavaScript

$('.ful').on('click',function(){
    $('ul').show();
});
$('.ful').dblclick(function(){
    $('ul').hide();
});
$('.ful').mouseenter(function(e){
    $('.tip').show();
});
$('.ful').mouseout(function(e){
    $('.tip').hide();
});
$('ul').mouseenter(function(){
    stopImmediatePropagation();
    $('.tip').hide();
})