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>
Related
Objective: I am trying to create a tooltip where if you hover over a text a tooltip should appear. Basically, I would like to recreate this example at w3schools. Here is the link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip.
My Code:
render() {
return (
<div >
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class = "tooltip">
Hover over me
// <img src = "assets/images/react.png" alt="React / React Native" className = "icons"></img>
<span class = "tooltiptext">
Tooltip text
</span>
</div>
</div>
);
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip, .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: relative;
right: 100px;
z-index: 1;
/* bottom: 125%; */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip, .tooltiptext::after {
content: "";
position: absolute;
/* top: 100%; */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover, .tooltiptext {
visibility: visible;
opacity: 1;
}
side-note: I'm aware I commented out some positioning styles in the CSS so it is easier to find. Also, I would prefer to hover over a tech icon and have it display its name, but first I thought it would be better to start simple.
Outcome: The "Hover Over me" text and tooltip do not display; it appears white so you can't see it. However, If I hover over the tooltip text, both elements display. I can figure out the position of these elements through developer tools. Also, the tooltip does not display properly.
It looks like you are using the wrong CSS selectors. You want to use .tooltip .tooltiptext instead of .tooltip, .tooltiptext (no comma) and similar for the other rules. The first one selects elements with the class .tooltiptext that are descendants of .tooltip. The second one selects elements that have the class .tooltip or .tooltiptext.
Documentation
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;
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>
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>
Link:
http://jsbin.com/EFAlace/3/edit?html,css,output
HTML:
<a href='#' class='tooltip-parent'>Hover over me!
<span class='tooltip-container'>
<span class='tooltip'>
<a style='href='#'>Weird link</a><br>
One<br>
Two<br>
Three<br>
Four<br>
</span>
</span>
</a>
.tooltip-container added for absolute positioning, for 'reset' tooltip position.
CSS (LESS):
.tooltip-container {
position: absolute;
}
a:hover {
background-color: grey;
}
.tooltip-parent {
display: inline-block;
.tooltip {
width: 150px;
display: none;
position:relative;
border:1px solid blue;
&:before, &:after {
content: '';
top: -20px;
left: 20%;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
margin-left: -20px;
}
&:before {
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 23px solid;
margin-left: -23px;
border-bottom-color: inherit; /* Can't be included in the shorthand to work */
top: -23px;
}
}
&:hover .tooltip {
padding: 10px;
display: inline-block;
top: 20px;
}
}
ul {
list-style:none;
margin: 0; padding:0;
li {margin: 0; padding:0;}
}
:before and :after: things are for triangle at the top of the tooltip. Google on 'CSS triangle pseudo elements'
I have been experimenting with CSS-only tooltip, which pops out on hover over a parent element. You can see working example at jsBin. But I encountered the strange issue - when I add anchor inside tooltip - html markup blows out, just uncomment this code <!--<a style='href='#'>Weird link</a><br>--> in HTML pane and you will see what Im talking about. And then see at markup structure - browser just places HTML content of .tooltip outside of and element to which that tooltip is attached.
Thats pretty unclear behavior, any thoughts will be appreciated.
first i see a problem of anchor inside anchor, that's not allowed by html. try to rearrange your html tags in a better way.
secondly about the weird link, which is:
<a style='href='#'>Weird link</a>
why is it
style='href='#'