[resolvido] Erro no tooltip calendário (Eventlist-Calendar)

  • liclopes
  • Avatar de liclopes Autor do Tópico
  • Offline
  • JCB! Professional
  • JCB! Professional
Mais
14 anos 2 meses atrás #52746 por liclopes
liclopes created the topic: [resolvido] Erro no tooltip calendário (Eventlist-Calendar)
O tooltip de detalhes aparece atrás do calendário, como muda a sobreposição?

Módulo Eventlist Ajax Calendar
Tema: RocketTheme MetaMorph (demo http://demo.rockettheme.com/sep08_j15/ )
Estilo: Style1
Site: http://tecnologiaviva.com.br/



Arquivo mod_eventlistcalqajax.php
// include mootools tooltip
JHTML::_('behavior.tooltip');

Arquivo mod_eventlistcalqajax.css
/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 300px;
}

/* Container div Width set the same as calendar width. Setting both margins to auto centres the calendar*/
.eventcalq {
  width: 154px;
  margin-left: auto ;
  margin-right: auto ;
}

/* Overall calendar table properties */
.eventcalq table.mod_eventlistcalqajax_calendar {
	width: 154px;
	padding: 0;
	margin: 0;
	border-left: 1px solid #A2ADBC;
	font: normal 12px/20px "Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
	color: #616B76;
	text-align: center;
	background-color: #fff;
}

/* Blank cell properties */
.eventcalq td.mod_eventlistcalqajax {
	font: bold 11px/20px "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	border-right: 1px solid #A2ADBC;
	border-bottom: 1px solid #A2ADBC;
	width: 21px;
	height: 20px;
	text-align: center;
	background-color: #F0F8FF;
}
<script type="text/javascript">
window.addEvent('domready', function(){ 
  var JTooltips = new Tips($$('.hasTip'), { 
    maxTitleChars: 50, fixed: false
  });
});
</script> 

Please Entrar ou Registrar to join the conversation.


  • liclopes
  • Avatar de liclopes Autor do Tópico
  • Offline
  • JCB! Professional
  • JCB! Professional
Mais
14 anos 2 meses atrás #53293 por liclopes
liclopes replied the topic: Re: [resolvido] Erro no tooltip calendário (Eventlist-Calendar)
Adicionei no CSS eu adicionei o atributo z-index para comandar a sobreposição de camdas, como eu queria que o calendário ficasse atras usei z-index: 1; e para por o tooltip na frente usei z-index: 99;
.eventcalq {
  width: 154px;
  margin-left: auto ;
  margin-right: auto ;
  z-index: 1;
}

.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 300px;
	z-index: 99;
}

Please Entrar ou Registrar to join the conversation.