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>
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
I'm facing a problem in react project. in this, I have to add tooltip in textarea tag
I'm getting tooltips when i replaced textarea tag with input tag but the tag must be textarea
<section>
<label className="label">Help Text</label>
<label className="input"> <i className="icon-append fa fa-file-text-o"></i>
<textarea row="3" style={{minWidth: "100%"}} id="cHelpText" type="text" className="custom-scroll" onChange={this.handleChange} ></textarea>
<b className="tooltip tooltip-top-right"><i className="fa fa-file-text-o txt-color-teal"></i></b>
</label>
</section>
I would suggest that instead of using Tooltips which require a hover state (and hence a mouse) to use the placeholder attribute instead, and then it works on mobile and desktop. It is then also visible on page load which is more helpful - ultimately the intention here is to guide a user.
<textarea row="3" style={{minWidth: "100%"}} placeholder="help text here" onChange={this.handleChange} ></textarea>
That would be more elegant. You do not need a type="text" on a textarea either.
You can wrap the textarea in a div and then show or hide the tooltip on hover -
.tooltip {
position: relative;
display: inline-block;
}
.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">
<textarea></textarea>
<span class="tooltiptext">Tooltip text</span>
</div>
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
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;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
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>
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>