JAVASCRIPT
$(function(){ childElement={}; numElement=0; $('a').hover(function(){ numElement++; childElement[numElement]=$(this); //add Element HTML ref=$(this).attr('href'); name=$(this).text(); tops=$(this).offset().top; left=$(this).offset().left; width=$(this).outerWidth(); height=$(this).outerHeight()+5; if(ref){ ref=ref; }else{ ref='Không xác định'; } if(width<=120){ classes='small'; }else{ classes='big'; } $('body').append('<div class="over_num_'+numElement+' tips_by_mad '+classes+'" style="top: '+tops+'px; left: '+left+'px; margin-top: '+height+'px;">'+name+'<br>'+ref+'</div>'); if(childElement[numElement]){ childElement[numElement].mouseleave(function(){ $('div[class*="over_num_"]').remove(); childElement[numElement]=''; }); } }); })
CSS
.tips_by_mad{ max-width: 200px; padding: 8px; color: #ffffff; text-decoration: none; background-color: #000000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; position: absolute; z-index: 1000; } .tips_by_mad.big:before{ width: 0; height: 0; border: 6px solid transparent; content: ''; top: -10px; left: 50%; margin-left: -5px; border-bottom-color: #000000; border-width: 5px; position: absolute; border-style: solid; } .tips_by_mad.small:before{ width: 0; height: 0; border: 6px solid transparent; content: ''; top: -10px; left: 10px; margin-left: -5px; border-bottom-color: #000000; border-width: 5px; position: absolute; border-style: solid; }
Nếu code này có sai hay chỗ nào không phù hợp sừa giúp nhé
![[OFF]](/assets/images/off.gif)