posicion de un elemnto html

[zyon]

Hola amigos, no se como explicarme pero trataré, tengo el siguiente código:

Código HTML:

<td><label for="fOperacion"><span>Fecha de Operaci&oacute;n o de Hechos: </span>
                                        <br>
                                        <input value="" class="text-input-1 input" type="text" name="fOperacion" id="fOperacion" />
                                        <span class="tooltip"><span>Proporcione la fecha de operaci&oacute;n de hechos</span></span>
                                    </label>
                                </td> 

como ven, tengo unas etiquetas y un campo dentro de un TD, y el SPAN con la clase "tooltip" me sirve para mostrar el mensaje en caso de que el campo se envíe vacío. La validación me funciona bien, pero tengo un problema, cuando aparece el mensaje de error (<span class="tooltip"><span>Proporcione la fecha de operaci&oacute;n de hechos</span></span>) pues hace que el TD se haga más grande y deforma el tamaño de mi tabla, entonces quería saber si hay una propiedad en CSS que permita hacer un elemento al hacerse visible que no altere los tamaños ni nada, como si fuera un globito que aparece sobre un campo indicando que debe ser llenado pero sin recorrer mis demas elementos de lugar.

De antemano muchas gracias!

[C2am]

En estos casos la posición del tooltip debe ser absoluta, con respecto al elemento que quieras tener como referencia, que en tu caso me da la sensación que será el label o al input, o al elemento que creas conveniente.

O sea agrega:

Código CSS:

.tooltip{posicion:absolute;
top:xx;
left:xx;}
 

Muestra el css que estas usando.

Saludos

[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;
}