posicion de un elemnto html

[zyon]

Hola C2am, es un scrip lo que uso para hacer el efecto de globo al momento de que se cumple una validación:

Código HTML:

var screenWidth = $(window).width();
            var screenBottom = $(window).scrollTop() + $(window).height();
    
            $("span.tooltip span").each(function(){
                // grab the containing element
                $container = $(this).parent();
      
                // give it relative position if required
                if ($container.css("position") != 'absolute' 
                    && $container.css("position") != "fixed") {
                    $container.css({
                        position: 'relative'
                    });
                }
                $( "<div>" )
                .addClass( "arrow" )
                //.addClass( top.vertical )
                //.addClass( left.horizontal )
                .appendTo( this );
            }); 
            $("span.tooltip").each(function(){
                // grab the containing element
                $container = $(this).parent();
     
                var totalHeight = $container.height() + $(this).outerHeight();
                //alert(totalHeight);
                var width = $(this).outerWidth();
                var offset = $container.offset();
      
                // now we get the position the tip
                var top = $container.height(); // default placement
                var left = 0;
      
                // re-position if it's off the right of the screen
                //alert((offset.left + width) + " > " + screenWidth );
                if (offset.left + width > screenWidth) {
                    left = 0 - width + 42;
                //$(this).addClass('left');
        
                } else {
                //$(this).removeClass('left');
                }
      
                // finally set the css properties to position onscreen
                //alert('- : ' + width / 2);
                $(this).css({
                    /*"top": top,*/
                    /*"left": left - 70,*/
                    "float":"left",
                    "clear":"left"
                });
            });/**/

Donde pienso se que hay que aplicarle el estilo para que se hagan visible y no cambie el tamaño de mi tabla y aparezca como flotando cerca del campo que no cumple la validación es al final del scrip, en esta parte:

Código HTML:

 $(this).css({
                    /*"top": top,*/
                    /*"left": left - 70,*/
                    "float":"left",
                    "clear":"left"
                });

En realidad yo no hice el scrip, me dieron el proyecto ya con ese código pero debía mejorarse por que tenía limitantes, entonces ya lo mejoré visualmente pero tengo el problema de hacer q el SPAN se haga visible indicando el campo que no cumple con la validación.

El CSS que uso es:

Código:

span.tooltip {
    /*background: transparent url(../img/sprite_tooltips.png) no-repeat scroll 0 0;
    font: 12px normal Helvetica,Arial,Verdana,sans-serif;
    color: red;
    display: none;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: left;
    white-space: nowrap;
    width: 220px;
    z-index: 100;*/
    padding: 10px 20px;
    color: white;
    border-radius: 10px;
    /*font: bold 14px "Helvetica Neue", Sans-Serif;*/
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
    display: none;
}

span.tooltip, .arrow:after {
    /*display: inline-block;
    padding: 15px 0 0 12px;*/
    background: red;
    border: 2px solid white;
}
/*
span.tooltip.left {
    background-position: 100% 0;
}

span.tooltip.left span {
    padding: 15px 0 0 17px;
}

span.tooltip.above {
    background-position: 0 100%;
}

span.tooltip.above span {
    padding: 13px 0 0 12px;
}

span.tooltip.above.left {
    background-position: 100% 100%;
}

span.tooltip.above.left span {
    padding: 13px 0 0 17px;
}

*/
/*
.ui-tooltip, .arrow:after {
    background: red;
    border: 2px solid white;
}
.ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
}*/
.arrow {
    width: 70px;
    height: 16px;/*16px;*/
    overflow: hidden;
    position: absolute;
    left: 20%;
    margin-left: -35px;
    bottom: 0px;/*-16px;*/
    /*background: blue;quitar*/
    top: -16px;
}
.arrow.top {
    top: -16px;/*-16px;*/
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 10px;/*-20px;*/
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    tranform: rotate(135deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}