Does IE fail when removing tag attribs with jquery?

Question

I´m using an different box for title atrib in elements. I´ve developed a simple jQuery stuff to do it but... the "best friend ever", IE, don´t work correctly. It´s simple don´t remove the title atrib as the other browsers do. The result: i´ve the box showing the title atrib and the own browser box over this. How can i resolve this? (code next). NOTE: works on Chrome, Safari, Firefox, Opera. But 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 over the 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 am a title =). must show">sagittis lec</a>. Donec felis leo, id fermentum nibh porttitor. Vestibulum ante <a href="#" title="">empy title (dont need to work)<span></span></a> primis. Lorem ipsum dolor sit amet, <a href="#" title="another title to show">lorem ipsum</a> elit.</p>
  </div>

INFO: if an alert is placed after

$(this).attr('title', $('#dbox').text());

it work on IE.. but i can´t use an alert.

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

I tested your code in FF4 and I'm getting the same double title tooltip behavior you are in IE (your tooltip pops up and then the built-in FF one pops up about a second later after continuing to hover over the link). From the code you've posted this is absolutely expected behavior.

What you need to do is either leverage a different attribute (ie: use 'dboxtitle' rather than 'title') or you're going to need to dynamically remove and re-add the title on mouseover/mouseout so that the browser doesn't see it (ref: Disabling browser tooltips on links and <abbr>s).

edited May 23 '17 at 12:12

Community

1
1

answered Apr 29 '11 at 17:58

arychj

711
3
21

Yeah, i know this, but i do the replacement of the title and put the value into the box than i show the box. I will try this as you send me. Ths. – Alexandre Cruz Apr 29 '11 at 18:16
You're putting the title in your own tooltip element, but you are never removing it from original element: `$(this).attr('title', '');` in your mouseover element. Should have been more clear, my bad. – arychj Apr 29 '11 at 18:22
Ops.. I removed this line when editing the post, but i used $(this).removeAttr('title'); and it wont worked. Now it´s ok =). Thanks – Alexandre Cruz Apr 29 '11 at 18:47

Does IE fail when removing tag attribs with jquery?

1 Answers1