In my website, the tooltip is not showing completely when the text is more, it is hiding under the header part… what should I doto show it?
Below is the screenshot to mention where is the problem…
Hi,
It looks like a z-index issue and you would need to ensure that the z-index of the tooltip is higher than the z-index of the header which may mean tracking back to the parent of each element and checking their z-indexes also. Note only positioned elements can have z-index applied. Once you have the stacking contexts at the correct level the tooltip should overlap the other element ok.
As you have only provided a screenshot of your page all I can offer is a screenshot of me fixing it 
Suffice to say that’s not much help is it so please supply the relevant css and html or better still a link to the page concerned and we can give you a proper solution
5 Likes
HTML Code
<div class="paddingboth10">
<span class="round">{{$root.exclusiveDiscountsLength}}</span>
<span class="bluecolor" style="font-weight: 600;">{{globalLabel.applicationLabels.common.premiumSliderModalLabel4}} <i
class="fa fa-question-circle fa-sm orangetext"
data-toggle="tooltip" data-html="true"
title="{{$root.exclusiveDiscounts}}" tooltip></i></span>
</div><div class="paddingboth10">
<span class="round">{{$root.exclusiveDiscountsLength}}</span>
<span class="bluecolor" style="font-weight: 600;">{{globalLabel.applicationLabels.common.premiumSliderModalLabel4}} <i
class="fa fa-question-circle fa-sm orangetext"
data-toggle="tooltip" data-html="true"
title="{{$root.exclusiveDiscounts}}" tooltip></i></span>
</div>
CSS Code
.tooltip {
position: absolute;
z-index: 1030;
display: block;
font-size: 12px;
line-height: 1.4;
visibility: visible;
filter: alpha(opacity=0);
opacity: 0;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
bottom: 0;
left: 5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
right: 5px;
bottom: 0;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
left: 5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
right: 5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
Perhaps a URL to your web site would be more informative.
Hi,
When you paste code please use the code formatting option (preformatted text) in the window toolbar ‘</>’. Just highlight your code and click that icon,
The html you posted is not much use as it does not show both of the contexts where the issue is occurring (and indeed you seem to have posted raw cms rather than html output which is what we need (view source)).
As a start you can try tinkering with the z-index here:
Stick it to some absurdly high number just to check if it has effect. e.g.
z-index: 99999999;
If that has no effect then you will need to find out what z-index is enforce in the header. Use your developer tools to find these rules.
As mentioned above you may need to track back to the ultimate parent of each of those elements in case they have z-index applied as z-index is atomic when applied to a parent (i.e. a positioned parent with a z-index other than auto will determine how all children interact with other elements on the page irrespective of what z-index a child has).
That’s about as much as I can do with what you have posted so far.
Are you sure that’s the page header, or is it part of the browser address and search bar? If it’s the browser, then we’d need to look at how the tooltip is being positioned.
hey thanks a lot for your reply… but there is effect anywhere in the site
ya u r right… it is hiding behind the address bar… sorry its my mistake…
but i paste the css code… and the position: absolute is given to the tooltip
I’m guessing that your tooltip is controlled by a specific script which will work out the position dynamically and use inline styling to position the tooltip where it needs to be. However the script should be working out the height of the tooltip to ensure it is visible in the browser window and if there is not enough room above then the tooltip should be placed below.
This is not something that can be done with a simple css fix I’m afraid. I’m also guessing that you have probably put too much information into the tooltip as tooltips should really only be short ‘tips’ and not an elongated list of options. You should probably have those options in the html or in a hide and show in the page taking up space in the flow when required.
As it stands we still do not have enough information at hand to answer your question precisely and we have asked nicely a number of times now .
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.