Help with IE7 and :before/:after support

[Gabums]

Greetings!

I took some code from this site. It works great in EVERY browser but IE7 where the arrow of the tooltip is missing. I know that there are issues with IE7 not supporting :after in CSS. I've tried adding this code:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

But it hasn't made a difference. There has to be some type of hack I can add in. I need this tooltip to work in both mobile and IE7 (strange company I work for, ha!). This is my css:

<style type="text/css">
    #tooltip {
        text-align: center;
        color: #fff;
        background: #111;
        position: absolute;
        z-index: 100;
        padding: 15px;
    }

    #tooltip:after /* triangle decoration */ {
        width: 0px;
        height: 0px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #000000;
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }

    #tooltip.top:after {
        border-top-color: transparent;
        border-bottom: 10px solid #111;
        top: -20px;
        bottom: auto;
        content: "";
    }

    #tooltip.left:after {
        left: 10px;
        margin: 0;
        content: "";
    }

    #tooltip.right:after {
        right: 10px;
        left: auto;
        margin: 0;
        content: "";
    }

</style>

and this is my javascript

$(document).ready(function () {
    var targets = $('[rel=tooltip]'),
        target  = false,
        tooltip = false,
        title   = false;

    targets.bind('mouseover', function()
    {
        target  = $(this);
        tip     = target.attr('title');
        tooltip = $('<div id="tooltip"></div>');

        if(!tip || tip === '')
            return false;

        target.removeAttr('title');
        tooltip.css('opacity', 0)
               .html(tip)
               .appendTo('body');

        var init_tooltip = function()
        {
            if( $(window).width() < tooltip.outerWidth() * 1.5)
                tooltip.css('max-width', $(window).width() / 2);
            else
                tooltip.css('max-width', 340);

            var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2),
                pos_top = target.offset().top - tooltip.outerHeight() - 20;

            if( pos_left < 0 )
            {
                pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                tooltip.addClass('left');
            }
            else
                tooltip.removeClass('left');

            if( pos_left + tooltip.outerWidth() > $(window).width())
            {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                tooltip.addClass('right');
            }
            else
                tooltip.removeClass('right');

            if( pos_top < 0 )
            {
                pos_top = target.offset().top + target.outerHeight();
                tooltip.addClass('top');
            }
            else
                tooltip.removeClass('top');

            tooltip.css( { left: pos_left, top: pos_top } )
                   .animate( { top: '+=10', opacity: 1 }, 50);
        };

        init_tooltip();
        $(window).resize(init_tooltip);

        var remove_tooltip = function()
        {
            tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
            {
                $( this ).remove();
            });

            target.attr('title', tip);
        };

        target.bind('mouseleave', remove_tooltip);
        tooltip.bind('click', remove_tooltip);
    });
});

Thoughts? I know there is some type of script I can add that somehow tells the object to do the :before/:after thing in the js code, but I can't figure out how to make it work. Something like this:

$(document).ready(function() {
$("#menu li:last").addClass("last");
});

Thanks so much in advance!
Gab

[Taywin]

Please read this, someone has already suggested a solution.

[Gabums]

Thank you so much for your reply! I did look at that site before I posted here but it was very confusing to get the expressions to work. I took a stab at it again and came up with this:

<style type="text/css">

    #tooltip {
        text-align: center;
        color: #fff;
        background: #111;
        position: absolute;
        z-index: 100;
        padding: 15px;
    }

    #tooltip:after,
    .lt-ie9 #tooltip:after,
    .lt-ie8 #tooltip .ie-after
     /* triangle decoration */ {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
        background:url(arrow_2.gif) repeat-y;
        width:21px;
        height:12px;
    }

    #tooltip.top:after,
    .lt-ie9 #tooltip.top:after,
    .lt-ie8 #tooltip.top .ie-after{
        border-top-color: transparent;
        border-bottom: 10px solid #111;
        top: -20px;
        bottom: auto;
    }

    #tooltip.left:after,
    .lt-ie9 #tooltip.left:after,
    .lt-ie8 #tooltip.left .ie-after{
        left: 10px;
        margin: 0;
    }

    #tooltip.right:after,
    .lt-ie9 #tooltip.right:after,
    .lt-ie8 #tooltip.right .ie-after{
        right: 10px;
        left: auto;
        margin: 0;
    }


/* ==|== ::after polyfill =================================================== */
.lt-ie8 #tooltip {
  /* creates <i class="ie-after"></i> */
  zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="ie-after" );
}

</style>

It still does not work, but I did learn that IE7 does not support content:''. So maybe the arrow is not showing up because it is called with that code? I've been spending hours trying to find a workaround to make the javascript call the content but I'm just at a loss...

[Taywin]

Do you mean you have downloaded & included the library from code google (pick the ie8) in the page, and it still doesn't work?

[Gabums]

Yes, that is correct. I've tried that ie8 google code as well as adding:

<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

and that "pseudo" js:

<script src="jquery.pseudo.js" type="text/javascript"></script>

Nothing works :-/

[Gabums]

Ok, I think I found the problem. IE7 does not like css generated content (ie - content=''. I found a line of jquery called a "polyfill" that should be able to fix the issue.

$(function(){
  var elements = $('#closest_id_to_elements').find('elements');
  // find all elements that match
  elements.after('<div class="some-name"></div>');
  // add a new div after these & style them
  // if you want to add in data-* info, that's party simple too
  elements.after('<div class="some-name">'$(this).data('whatevs');'</div>');
});

I still have not got it to function correctly but I feel like I am heading in the right direction. Not sure if I should put this in with the rest of my js or seperate yet, but I'm trying all options... If you have any advice on the matter I'd be very greatful for your help.

Thanks!