xaiborweb
Dseda
Programador
No recomendado
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola amigos del foro beta
estoy diseñando una plantilla para wordpress en la cual implemente un toolpit miren
como ven en la foto en chrome el tolpit esta bien pero en firefox y explorer el toolpit cuando estas cerca del sidebar derecho pasa por detrás del sidebar y no por encima ya probe de todas las formas que conozco y nada que se me soluciona el problema
para el toolpit estoy utilizando este css
y este script en el header
la pagina la estoy diseñando en un localhost así que por este motivo no puedo la puedo compartir con un link
espero me echen una mano y gracias por su ayudas compañeros 🙂
estoy diseñando una plantilla para wordpress en la cual implemente un toolpit miren
como ven en la foto en chrome el tolpit esta bien pero en firefox y explorer el toolpit cuando estas cerca del sidebar derecho pasa por detrás del sidebar y no por encima ya probe de todas las formas que conozco y nada que se me soluciona el problema
para el toolpit estoy utilizando este css
HTML:
/* Tooltip */
#tooltip {
position: absolute;
z-index: 99999!important;
color: #fff;
font-size: 11px;
text-decoration: none !important;
text-align: left !important;
width: 340px;
height: 210px !important;
background-color: #000;
margin-top: 220px !important;
margin-left: 240px !important;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 70px;
-webkit-border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 10px;
}
#tooltip p {
line-height: 140%;
margin-bottom: 0 !important;
padding: 0 5px 0 5px !important;
}
#tooltip h2 {
font-weight: bold;
color: #EA2A20;
font-size: 15px;
padding: 5px 5px 5px 8px;
margin: 0 auto;
}
#tooltip .tipHeader {
height: 8px;
background: url(images/tipHeader.gif) no-repeat;
}
/* IE hack */
#tooltip .tipBody {
background-color: #000;
padding: 5px;
}
#tooltip .tipFooter {
height: 8px;
background: url(images/tipFooter.gif) no-repeat;
}y este script en el header
PHP:
<!-- INICIA SCRIP ToolTip PARA LAS CARTELERAS DE LAS PELICULAS -->
<script type="text/javascript">
$(document).ready(function () {
var targets = $('[rel~=tooltip]'),
target = false,
tooltip = false,
title = false;
targets.bind('mouseenter', 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() - 0;
if(pos_left < 0) {
pos_left = target.offset().left + target.outerWidth() / 2 - 170;
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) {
var pos_top = target.offset().top + target.outerHeight();
tooltip.addClass('top');
}
else tooltip.removeClass('top');
tooltip.css({
left: pos_left,
top: pos_top
}).animate({
top: '+=0',
opacity: 0.8
}, 250);
};
init_tooltip();
$(window).resize(init_tooltip);
var remove_tooltip = function () {
tooltip.animate({
top: '-=0',
opacity: 0.7
}, 80, function () {
$(this).remove();
});
target.attr('title', tip);
};
target.bind('mouseleave', remove_tooltip);
tooltip.bind('click', remove_tooltip);
});
});
</script>
<!-- FIN SCRIP ToolTip PARA LAS CARTELERAS DE LAS PELICULAS -->la pagina la estoy diseñando en un localhost así que por este motivo no puedo la puedo compartir con un link
espero me echen una mano y gracias por su ayudas compañeros 🙂
