internet explorer - Does IE fail when removing tag attribs with jquery? -
i´m using different box title atrib in elements. i´ve developed simple jquery stuff but... "best friend ever", ie, don´t work correctly. it´s simple don´t remove title atrib other browsers do. result: i´ve box showing title atrib , own browser box on this. how can resolve this? (code next). note: works on chrome, safari, firefox, opera. ie don´t.
<title>box</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> #dbox { background: #003767; padding: 5px 8px; position: absolute; margin: 20px; color: white; font-size: 14px; display: inline; /* border radius specif browsers */ -webkit-border-radius: 3px; /* safari, chrome */ -khtml-border-radius: 3px; /* ktml browsers */ -moz-border-radius: 3px; /* firefox, mozila found. */ -o-border-radius: 3px; /* opera, opmob */ } </style> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> var dbox_time = 120; var delay_time = 500; $(document).ready(function(){ $('<div id="dbox"></div>').insertafter(('body')); $("[title != '']").each(function() { $(this).addclass('lkbox'); $(this).css({border: '1px solid red'}); }); $('#dbox').empty(); $('#dbox').css({ display: 'none', opacity: '0' }) $(document).mousemove(function(e){ $('#dbox').css({ 'left': e.pagex, 'top' : e.pagey }) }) $('.lkbox').mouseover(function(){ $('#dbox').text($(this).attr('title')); $('#dbox').css({display: 'block'}) .stop().animate({opacity: '1'}, dbox_time) }) $('.lkbox').mouseout(function(){ $(this).attr('title', $('#dbox').text()); $('#dbox').css({display: 'none'}) .stop().animate({ opacity: '0' }, dbox_time) }) }) </script>
body:
<div style="float: left; width: 70%; padding: 50px;"> <h1>examples: (mouse on links)</h1> <p>curabitur lacus tortor, pellentesque eget <a href="#">interdum in</a>, auctor et lorem. in in quam lorem, vel <a href="#" title="i´m title =). must show">sagittis lec</a>. donec felis leo, id fermentum nibh porttitor. vestibulum ante <a href="#" title="">empy title (dont need work)<span></span></a> primis. lorem ipsum dolor sit amet, <a href="#" title="another title show">lorem ipsum</a> elit.</p> </div>
info: if alert placed after
$(this).attr('title', $('#dbox').text());
it work on ie.. can´t use alert.
i tested code in ff4 , i'm getting same double title tooltip behavior in ie (your tooltip pops , built-in ff 1 pops second later after continuing hover on link). code you've posted absolutely expected behavior.
what need either leverage different attribute (ie: use 'dboxtitle' rather 'title') or you're going need dynamically remove , re-add title on mouseover/mouseout browser doesn't see (ref: disabling browser tooltips on links , <abbr>s).
Comments
Post a Comment