display: none; vs visibility: hidden;
I know that "display: none;" will not take space and "visibility: hidden;" will take space when hidden.
Then why is this tooltip defined by "visibility: hidden;" is NOT taking space? It is acting like "display: none;"
In short, the tooltip should not overlap the text beneath it, right?
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<div class="tooltip">Hover over me
<div class="tooltiptext">Tooltip text</div>
</div>
<p>Note that the tooltip is overlapping the text beneath it. The text should appear below the tooltip position, right?</p>
</body>
</html>
Remove this part of code. and you will see the difference
/* Position the tooltip */
position: absolute;
Related
I have an icon that when hovered over displays a tooltip blurb. I've fashioned it based on the W3Schools CSS tooltip example.
Here's the code:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
/* I WANT THIS TO CHANGE BASED ON TEXT LENGTH */
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>
</body>
My problem is that the text that appears in the tooltip is generated dynamically and may be wider than the static 120px width of the blurb. I want the width of the blurb to adjust based on the width of the text but if I set the width to auto, it only stretches as wide as the first word. How do I make that width change?
Just set white-space: nowrap; instead of setting width on .tooltip .tooltiptext
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
white-space: nowrap; /* this is new */
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>
</body>
The following will keep a minimum 120px wide tooltip, as well as prevent text from wrapping on its own ( <br> tags will need to be used for linefeeds). It also will break/look ugly if the message is too long.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
min-width: 120px; /* min-width makes sure it will always be at least 120px */
white-space: nowrap; /* Prevents text from wrapping on its own */
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>
</body>
</html>
Is it possible to bring the arrowhead in the front of tooltip from the microtip library?, I'm trying to add shadow to the entire tooltip but the head pointing down is on the back, so it gets blocked. Tried adding a background image to after but it's not working correctly.
Here's the code:
&[aria-label][role="tooltip"] {
--microtip-font-size: 15px;
&::after {
box-shadow: 5px 9px 45px 4px darkgrey;
border-radius: 7px;
border: 1px solid darkgrey;
background-color: white;
color: #000080;
}
}
<button type="button" name="button" class='undo' aria-label="Undo" data-microtip-position="top" role="tooltip"></button>
Your tooltip content is in :after and arrow is in :before and :after comes up than :before if no z-index is defined...
Try to define the z-index of arrow i.e. [aria-label][role~="tooltip"]:before...
[aria-label][role~="tooltip"]:before {
z-index: 99;
}
Here's a basic example of a tooltip that might help out without overcomplicating things.
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Just note that the position of the tooltip text isn't very good.</p>
</body>
</html>
I made this code some time ago, it does everything I could want, well, almost. I can't for the life of me figure out how to add pop up text when the user hovers over the image; then disappears when the user hovers off the image.
Here is a JSFiddle of my code, as well as it below.
<img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" onmouseover="this.src='https://logopond.com/avatar/154827/no-bullshit.jpg'" onmouseout="this.src='http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg'" />
CSS Tooltip is what you should be looking for I reckon.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">
<img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" onmouseover="this.src='https://logopond.com/avatar/154827/no-bullshit.jpg'" onmouseout="this.src='http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg'" />
<span class="tooltiptext">Tooltip text</span>
</div>
I have a div that needs to have relative positioning and limited width and height. I want scrollbars added if the content overflows. For this, I have style overflow:auto. This much works. Now I have a tooltip that I want to display when mousing over a target. I want the tooltip to display in its entirety, so it should display beyond the bounds of the enclosing div if necessary. For that I have the tooltip style overflow:visible. Problem is, the tooltip does not display beyond the bounds of the div. If I remove the positioning of the div, it works as expected: the div has the scrollbar, and the tooltip extends beyond the div. How can I get this to work when the div is relatively positioned? Any assistance would be appreciated.
.tooltip {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
vertical-align: central;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
position: absolute;
display: none;
margin: 5px;
padding: 5px;
min-width: 200px;
max-width: 400px;
background-color: steelblue;
color: #fff;
text-align: left;
border-radius: 6px;
overflow: visible;
}
.tooltip:hover + .tooltiptext {
display: inline;
}
.scrollIfNeeded {
position: relative;
left: 100px;
top: 100px;
overflow: auto;
background-color: lightgoldenrodyellow;
}
<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
<span class="tooltip"></span>
<span class="tooltiptext">
This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div.
</span>
Scale: <input id="ScaleUpButton" type="text" /> This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
</div>
You need to add position:fixed; to fix that. try this one
.tooltip {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
vertical-align: central;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
position: absolute;
display: none;
margin: 5px;
padding: 5px;
min-width: 200px;
max-width: 400px;
background-color: steelblue;
color: #fff;
text-align: left;
border-radius: 6px;
overflow: visible;
}
.tooltip:hover + .tooltiptext {
display: inline;
/* here need to set position and width [optionally]*/
position: fixed;
max-width: 200px;
}
.scrollIfNeeded {
position: relative;
left: 100px;
top: 100px;
overflow: auto;
background-color: lightgoldenrodyellow;
}
<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
<span class="tooltip"></span>
<span class="tooltiptext">
This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div.
</span>
Scale:
<input id="ScaleUpButton" type="text" />This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
</div>
This is the HTML:
<div class="arrow">
i need to hide the overflown text which comes out of the div
</div>
and the corresponding CSS is:
.arrow {
width: 5%;
position: relative;
}
.arrow:before {
content: " ";
width: 0;
position: absolute;
left: -0.58em;
border-style: solid;
border-width: .585em .585em .585em 0;
}
I need to hide the overflowing text.
If I apply overflow:hidden the pointed triangle disappears instead of the text.
Can someone please help me with this.
The following might work if you wrap your content in an extra element:
<div class="arrow">
<span>i need to hide the overflown
text which comes out of the div</span>
</div>
For the CSS:
.arrow {
width: 5%;
position: relative;
}
.arrow:before {
content:"";
width: 0;
position: absolute;
left: -0.58em;
border-style: solid;
border-width: .585em .585em .585em 0;
border-color: red yellow green blue;
}
.arrow span {
width: auto;
display: block;
white-space: nowrap;
overflow: hidden;
}
I tweaked the border colors since the arrow shape was not obvious, but you can fix that easily enough.
I wrapped the text in a span, set white-space: nowrap to get the text to form a single line and then set overflow: hidden to hide any text wider than the width. Set display: block or else use a div instead of a span.
Fiddle demo: http://jsfiddle.net/audetwebdesign/nukeL/
You can do this without adding any more elements to your html:
Added white-space: nowrap to keep the text from wrapping
Added padding-left: 1em to make room for the arrow
Set left: 0 for your arrow
and fixed the arrow display...
CSS
.arrow {
white-space: nowrap;
width: 10%;
position: relative;
overflow: hidden;
padding-left: 1em;
}
.arrow:before {
content:" ";
width: 0;
height: 0;
position: absolute;
left: 0;
border-right: 0;
border-bottom: .585em solid transparent;
border-top: .585em solid transparent;
border-left: .585em solid black;
}
Demo
Add a container inside the arrow to constrain your text (assuming fixed height).
HTML
<div class="arrow">
<div class="container">
I need to hide the overflown text which comes out of the div.
</div>
</div>
CSS
.container {
height: 30px; /** assuming fixed height here. **/
max-height: 30px;
overflow: hidden;
}
JSFiddle example: http://jsfiddle.net/xBM88/
I don't find any pointed triangle in your fiddle.
But I would suggest you to take a look at text-overflow
overflow:hidden;
text-overflow:ellipsis; //don't hide content, instead render an ellipsis ("...")
Check this JSFiddle