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
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 1 year ago.
I just started to learn CSS and ran into a problem with opacity transition for tooltips. I made an example that only includes the code that apply to this problem. I have created some tooltips and wanted to add a opacity transition to some variations of the tooltips, but I cant get this to work.
when hovering the text the visibility triggers fine, but when adding a second class to the element that controls the opacity on hover nothing happens, I have tried rewriting this to use only one class but that yielded the same result. From all the documentation I found and read this should be working so I am stomped.
Any advice how to fix this would be much appreciated.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
text-align: center;
}
.tooltip_content{
visibility: hidden;
width: 120px;
background-color: black;
color: orangered;
text-align: center;
padding: 5px 0;
border-radius: 6px;
}
#tooltip_content_demo_8{
position: absolute;
z-index: 1;
top: -10px;
left: 105%;
opacity: 0.1;
transition: opacity 1s;
}
#tooltip_content_demo_8::after{
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltip_content{
visibility: visible;
}
.tooltip:hover .tooltip_content_styled{
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from nearly invisible to visible.</p>
<div class="tooltip" id="tooltip_demo_8">Hover over me to tooltip
<span class="tooltip_content tooltip_content_styled" id="tooltip_content_demo_8">This is the tooltip text content</span>
</div><br/>
</body>
</html>
The ID selector always dominates by class. Therefore, the special condition !important must be added for opacity: 1 to work. Here is an example below.
body {
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
text-align: center;
}
.tooltip_content {
visibility: hidden;
width: 120px;
background-color: black;
color: orangered;
text-align: center;
padding: 5px 0;
border-radius: 6px;
}
#tooltip_content_demo_8 {
position: absolute;
z-index: 1;
top: -10px;
left: 105%;
opacity: 0.1;
transition: opacity 1s;
}
#tooltip_content_demo_8::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltip_content {
visibility: visible;
}
.tooltip:hover .tooltip_content_styled {
opacity: 1 !important;
}
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from nearly invisible to visible.</p>
<div class="tooltip" id="tooltip_demo_8">Hover over me to tooltip
<span class="tooltip_content tooltip_content_styled" id="tooltip_content_demo_8">This is the tooltip text content</span>
</div><br/>
so, i need to show many lines of text (written in the html), each line withing a "p" tag.
the text in the line should be followed by the $ sign (with a bit of styling on the $) and when you hover over the $ sign (and only over the $ sign, not over the rest of the text in the line), a simple html tooltip should appear with a text determined in the html (different text for every line).
i must do it so that only the text, the tooltip title (and css the class) are determined in the p properties (html), the rest should be in the css.
the $ sign must be defined in the css, so i could change it to another sign only once in the css if i need to.
so, i tried this (styling inside html file for simplicity of presentation here):
<html>
<head>
<title>test</title>
<style>
.my-tooltip::after {
content: "$";
font-size: 50%;
vertical-align: top;
}
</style>
</head>
<body>
<p class="my-tooltip" title="text description">The Text</p>
</body>
but my problem is, that the tooltip is displayed even when hovering over the rest of the line, not only over the $ sign.
i understand why this is happening (because "The Text" is also affected by "my-tooltip"), but i can't think of a way to do it right.
any suggestions?
thanks
Try this
.tooltip {
opacity: 1;
margin: 35px 0 0 20px;
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip span:after{
content: "$";
float: right;
cursor: pointer;
margin: -3px 0 0 2px;
}
.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 span:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="tooltip">Hover over me
<span>
<span class="tooltiptext">Tooltip text</span>
</span>
</div>
I think you can't do this using ::after instead you can do it like that.
<html>
<head>
<title>test</title>
<style>
.my-tooltip span{
font-size: 10px;
color: #4c4c4c;
position: relative;
bottom: 1ex;
}
.my-tooltip{
width: fit-content;}
</style>
</head>
<body>
<div><p class="my-tooltip">The Text<span title="text description">$</span></p></div>
</body>
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>
In the following code, I want a tool-tip to come up when the user hovers the span, how do I do that? I don't want to use any links.
<span> text </span>
Here's the simple, built-in way:
<span title="My tip">text</span>
That gives you plain text tooltips. If you want rich tooltips, with formatted HTML in them, you'll need to use a library to do that. Fortunately there are loads of those.
Custom Tooltips with pure CSS - no JavaScript needed:
Example here (with code) / Full screen example
As an alternative to the default title attribute tooltips, you can make your own custom CSS tooltips using :before/:after pseudo elements and HTML5 data-* attributes.
Using the provided CSS, you can add a tooltip to an element using the data-tooltip attribute.
You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top/right/bottom/left).
For instance, the following will add a tooltop positioned at the bottom of the span element.
<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>
How does this work?
You can display the custom tooltips with pseudo elements by retrieving the custom attribute values using the attr() function.
[data-tooltip]:before {
content: attr(data-tooltip);
}
In terms of positioning the tooltip, just use the attribute selector and change the placement based on the attribute's value.
Example here (with code) / Full screen example
Full CSS used in the example - customize this to your needs.
[data-tooltip] {
display: inline-block;
position: relative;
cursor: help;
padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 4px 8px;
font-size: 14px;
line-height: 1.4;
min-width: 100px;
text-align: center;
border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
bottom: 100%;
margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
left: 100%;
margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
top: 100%;
margin-top: 6px;
}
[data-tooltip-position="left"]:before {
right: 100%;
margin-right: 6px;
}
/* Tooltip arrow styling/placement */
[data-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
left: 50%;
margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
top: 50%;
margin-top: -6px;
}
[data-tooltip-position="top"]:after {
bottom: 100%;
border-width: 6px 6px 0;
border-top-color: #000;
}
[data-tooltip-position="right"]:after {
left: 100%;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
top: 100%;
border-width: 0 6px 6px;
border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
right: 100%;
border-width: 6px 0 6px 6px;
border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
z-index: 50;
}
In most browsers, the title attribute will render as a tooltip, and is generally flexible as to what sorts of elements it'll work with.
<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
stackoverflow.com
<img src="something.png" alt="Something" title="Something">
All of those will render tooltips in most every browser.
For the basic tooltip, you want:
<span title="This is my tooltip"> Hover on me to see tooltip! </span>
The title attribute will be used as the text for tooltip by the browser. If you want to apply style to it, consider using some libraries, e.g. jQuery UI.