Z-Index not working over table elements - css

Question

I have tried a lot but unable to figure out whats wrong. The z-index is not working at all when hovering over the Available Balance question mark (?). Upon hover over the question mark (?), it can be noticed that the tooltip is getting cut by the table heading area. Can someone please guide me what needs to be changed? Here is the complete code I am working with. Sorry for the long code but I have tried to put in as much as I can for some one to figure this out.
/* SECONDARY TOOLTIP (S) */
[tooltip] {
position: relative;
}
/* Arrow */
[tooltip]:before {
width: 16px;
height: 6px;
left: 50%;
margin-top: 1px;
top: calc(100% - 10px);
opacity: 1;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
transform: translate(-50%, 0%);
opacity: 0;
-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
pointer-events: none;
}
/* Text */
[tooltip]:after {
transform: translate(-50%, 0%);
left: 50%;
margin-top: 11px;
top: calc(100% - 10px);
opacity: 1;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(tooltip);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 9px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
opacity: 0;
-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
pointer-events: none;
/* overflow: overlay; */
z-index: 999999;
}
[tooltip]:hover:before,
[tooltip]:hover:after {
opacity: 1;
pointer-events: auto;
top: calc(100% + 0px);
z-index: 99999;
overflow: visible;
position: absolute;
}
/* SECONDARY TOOLTIP (E) */
.claro .dojoxGridHeader:first-child .dojoxGridRowTable {
border-left-width: 0;
}
.claro .dojoxGridMasterHeader .dojoxGridRowTable {
border-left: 1px solid #BCBCBC;
border-right: 1px solid white;
background-color: transparent;
}
.base .dojoxGridRowTable {
height: 30px !important;
word-wrap: break-word;
}
table.dojoxGridRowTable {
table-layout: auto;
}
.dojoxGridHeader table {
text-align: center;
}
.dojoxGrid table {
padding: 0;
}
.dojoxGridRowTable {
table-layout: fixed;
width: 0;
empty-cells: show;
}
table {
font-size: 100%;
}
table[Attributes Style] {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
user agent stylesheet
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
.claro .dojoxGridHeader:first-child {
/* margin-left: -50px; */
text-align: left;
margin: 0px -1px;
}
.dojoxGridHeader {
position: absolute;
overflow: hidden;
cursor: default;
}
.base .dojoxGrid {
background-color: #FFFFFF;
font-size: 12px;
color: #00204e;
padding: 0px 1px 20px 0px;
border-top: 0px;
height: 40px;
/* margin-top: 115px; */
/* border-top: solid 1px #D0D0D0; */
/* border-bottom: solid 1px #D0D0D0; */
/* margin-bottom: 20px; */
width: 100%;
/* width: 647px; */
/* height: 226px !important; */
}
.base .dojoxGrid {
background-color: transparent;
border-width: 1px 0 0 0;
font-size: 1em;
}
.base .dojoxGrid {
font-size: 0.916em;
}
.dojoxGrid {
position: relative;
background-color: #EBEADB;
font-family: Geneva, Arial, Helvetica, sans-serif;
-moz-outline-style: none;
outline: none;
overflow: hidden;
height: 0;
}
.portlet {
margin: 4px 0 30px 0;
padding: 0;
font-size: 0.75em;
}
body {
/* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
font-size: 14px;
color: #00204c;
/* margin-left: 125px; */
margin: 0 auto;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.base .dojoxGridRowTable {
height: 30px !important;
word-wrap: break-word;
}
.dojoxGridHeader table {
text-align: center;
}
.dojoxGridRowTable {
table-layout: fixed;
width: 0;
empty-cells: show;
}
table {
font-size: 100%;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
.claro .dojoxGridHeader:first-child {
/* margin-left: -50px; */
text-align: left;
margin: 0px -1px;
}
.dojoxGridHeader {
position: absolute;
overflow: hidden;
cursor: default;
}
.base .dojoxGrid {
background-color: #FFFFFF;
font-size: 12px;
color: #00204e;
padding: 0px 1px 20px 0px;
border-top: 0px;
height: 40px;
/* margin-top: 115px; */
/* border-top: solid 1px #D0D0D0; */
/* border-bottom: solid 1px #D0D0D0; */
/* margin-bottom: 20px; */
width: 100%;
/* width: 647px; */
/* height: 226px !important; */
}
.base .dojoxGrid {
background-color: transparent;
border-width: 1px 0 0 0;
font-size: 1em;
}
.base .dojoxGrid {
font-size: 0.916em;
}
.dojoxGrid {
position: relative;
background-color: #EBEADB;
font-family: Geneva, Arial, Helvetica, sans-serif;
-moz-outline-style: none;
outline: none;
overflow: hidden;
height: 0;
}
.claro .dojoxGridHeader .dojoxGridRowTable tr {
background: none;
}
.claro .dojoxGridRowTable tr {
background: url(images/row_back.png) #fff repeat-x;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.base .dojoxGridRowTable {
height: 30px !important;
word-wrap: break-word;
}
.dojoxGridHeader table {
text-align: center;
}
.dojoxGridRowTable {
table-layout: fixed;
width: 0;
empty-cells: show;
}
table {
font-size: 100%;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
.claro .dojoxGridHeader:first-child {
/* margin-left: -50px; */
text-align: left;
margin: 0px -1px;
}
.dojoxGridHeader {
position: absolute;
overflow: hidden;
cursor: default;
}
.base .dojoxGrid {
background-color: #FFFFFF;
font-size: 12px;
color: #00204e;
padding: 0px 1px 20px 0px;
border-top: 0px;
height: 40px;
/* margin-top: 115px; */
/* border-top: solid 1px #D0D0D0; */
/* border-bottom: solid 1px #D0D0D0; */
/* margin-bottom: 20px; */
width: 100%;
/* width: 647px; */
/* height: 226px !important; */
}
.base .dojoxGrid {
background-color: transparent;
border-width: 1px 0 0 0;
font-size: 1em;
}
.base .dojoxGrid {
font-size: 0.916em;
}
.dojoxGrid {
position: relative;
background-color: #EBEADB;
font-family: Geneva, Arial, Helvetica, sans-serif;
-moz-outline-style: none;
outline: none;
overflow: hidden;
height: 0;
}
#AccountSummarySavingsListPortlet th[idx="3"], #AccountSummarySavingsListPortlet td[idx="3"] {
text-align: right !important;
}
.claro .dojoxGridHeader tr:first-child .dojoxGridCell {
border-top: 1px solid transparent;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #FFFFFF;
font-size: 1em;
font-weight: bold;
color: #00204e;
border-bottom: thin;
border-bottom-style: solid;
border-bottom-color: #D0D0D0;
height: 20px;
text-align: left !important;
/* white-space: nowrap !important; */
padding: 15px 0px;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #7692B7;
}
.base .dojoxGridHeader .dojoxGridCell {
padding: 5px;
}
.base .dojoxGridHeader .dojoxGridCell {
border: 1px solid #fff;
font-weight: bold;
color: #fff;
}
.base .dojoxGridHeader .dojoxGridCell {
text-align: center;
}
.claro .dojoxGridHeader .dojoxGridCell {
padding: 2px 5px;
background: transparent;
border-bottom: 1px solid #BCBCBC;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid #BCBCBC;
vertical-align: top;
}
.claro .dojoxGridHeader .dojoxGridCell {
background: url(images/header.png) #e5edf4 repeat-x top;
border-style: solid;
border-width: 1px;
border-color: #BCBCBC #BCBCBC #BCBCBC transparent;
}
.base .dojoxGrid th {
text-align: center;
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: 1px solid #fff;
padding-left: 3px !important;
}
.claro .dojoxGridCell, .claro .dojoxGridCellFocus {
outline: none;
}
.claro .dojoxGridCell {
padding: 3px 5px;
border-color: transparent #E5DAC8 #E5DAC8 transparent;
}
.claro .dojoxGridCell {
padding: 0px;
border: 1px solid transparent;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #FFFFFF;
font-size: 1em;
font-weight: bold;
color: #00204e;
border-bottom: thin;
border-bottom-style: solid;
border-bottom-color: #D0D0D0;
height: 20px;
text-align: left !important;
/* white-space: nowrap !important; */
padding: 15px 0px;
}
.base .dojoxGridHeader th.dojoxGridCell {
background: none repeat scroll 0 0 #7692B7;
}
.base .dojoxGridHeader .dojoxGridCell {
padding: 5px;
}
.base .dojoxGridHeader .dojoxGridCell {
border: 1px solid #fff;
font-weight: bold;
color: #fff;
}
.base .dojoxGridHeader .dojoxGridCell {
text-align: center;
}
.claro .dojoxGridHeader .dojoxGridCell {
padding: 2px 5px;
background: transparent;
border-bottom: 1px solid #BCBCBC;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid #BCBCBC;
vertical-align: top;
}
.claro .dojoxGridHeader .dojoxGridCell {
background: url(images/header.png) #e5edf4 repeat-x top;
border-style: solid;
border-width: 1px;
border-color: #BCBCBC #BCBCBC #BCBCBC transparent;
}
.base .dojoxGrid th {
text-align: center;
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: none;
/* padding-left: 0px; */
}
.base .dojoxGridCell {
border: 1px solid #fff;
padding-left: 3px !important;
}
.claro .dojoxGridCell, .claro .dojoxGridCellFocus {
outline: none;
}
.claro .dojoxGridCell {
padding: 3px 5px;
border-color: transparent #E5DAC8 #E5DAC8 transparent;
}
.claro .dojoxGridCell {
padding: 0px;
border: 1px solid transparent;
}
.dojoxGridHeader .dojoxGridCell {
border: 1px solid;
border-color: #F6F4EB #ACA899 #ACA899 #F6F4EB;
background: url(images/grid_dx_gradient.gif) #E8E1CF top repeat-x;
padding-bottom: 2px;
}
.dojoxGridCell {
border: 1px solid;
border-color: #EBEADB;
border-right-color: #D5CDB5;
padding: 3px 3px 3px 3px;
text-align: left;
overflow: hidden;
}
caption, th {
text-align: left;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
/* margin: 0; */
padding: 0;
}
th {
font-weight: bold;
text-align: -internal-center;
}
table {
font-size: 100%;
}
/*------------------------------------------ */
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
#A_12 {
border: 1px solid #00204e;
border-radius: 50%;
}
<table class="dojoxGridRowTable" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 1001px;" id="TABLE_1"><tbody id="TBODY_2"><tr id="TR_3"><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_4" class="dojoxGridCell dojoDndItem dojoxGridCellFocus" idx="0" style="text-align: center;text-align: center;width:30%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_5">Account</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_6" class="dojoxGridCell dojoDndItem" idx="1" style="text-align: center;text-align: center;width:5%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_7">Currency</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_8" class="dojoxGridCell dojoDndItem" idx="2" style="text-align: right;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_9">Pending balance</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_10" class="dojoxGridCell dojoDndItem" idx="3" style="text-align: right;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_11">Available balance</div><a tooltip="this is a test" style="
position: relative;
text-align: center;
width: 100%;
display: block;
/* overflow: visible; */
" id="A_12">?</a>
</th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_13" class="dojoxGridCell dojoDndItem" idx="4" style="text-align: center;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_14">Accrued Interest Rate</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_15" class="dojoxGridCell dojoDndItem" idx="5" style="text-align: center;text-align: center;width:10%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_16">Active</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_17" class="dojoxGridCell dojoDndItem " idx="6" style="text-align: center;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_18">Interest Rate</div></th></tr></tbody></table>

Answer 1

because overflow is hidden in class .dojoxGridCell
set overflow to inherit
.dojoxGridCell {
border: 1px solid;
border-color: #EBEADB;
border-right-color: #D5CDB5;
padding: 3px 3px 3px 3px;
text-align: left;
overflow: inherit;
}