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/>
Related
i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip. its more of the badge on hover i need to show the content also we can have a max width of 500px and height no restrictions. Also you could see that on hover the tooltip is not coming exactly down of the respective item on which it is hovered. This is what i have tried, below is my code
.lightgrey-badge {
width: auto;
height: 20px;
padding: 0px 8px 0px 8px;
border-radius: 4px;
background-color: #f2f2f2;
}
.lightgrey-badge-text {
font-size: 12px;
font-weight: 600;
text-align: center;
color: #595959;
vertical-align: middle;
}
.border {
border-radius: 20px;
border: solid 2px #595959;
}
.lightgrey-badge-text-elipses {
display: inline-block;
max-width: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tooltiptext {
visibility: hidden;
max-width: 250px;
height: 50px;
opacity: 0.6;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
background-color: #000000;
color: #ffffff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 9999;
margin-top: 28px;
margin-left: -150px;
}
.tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.lightgrey-badge:hover .tooltiptext {
visibility: visible;
}
<span
class="lightgrey-badge border"
style="margin-right: 5px"
>
<span
class="lightgrey-badge-text lightgrey-badge-text-elipses"
>Element
<span class="tooltiptext">
<span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span
>
</span>
</span>
The reason for the element is not in the proper width is that it should increase the max-width. I changed the max width to 50px. it was at 40px
.lightgrey-badge-text-elipses {
max-width: 50px;
}
I added a min-width, max-width and padding for the long text as follows
.tooltiptext {
min-width: 100px;
max-width: 500px;
padding-left: 100px;
padding-right: 50px;
}
You can break the lines of the paragraph to get the long text in different lines so you can see the entire thing. Like this
<span class = "new-content"><span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span></span>
You will have to add a class in the css too.
.new-content {
white-space: pre-wrap;
}
Try this code It will help you
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
display: block;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<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>
<br><br>
<div class="tooltip">Hover over me Hover over me
<span class="tooltiptext">blah bla blaa a bal blak a ba b alj ang</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me 3
<span class="tooltiptext">askdjf ksfjlskd flsaa flsjdlfj sdfk sadkjflskd af sdkjf lsdkf sdljf</span>
</div>
</body>
</html>
Verify my answer if it's work for you
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
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>
I am trying to create a css tool-tip, the html and css code and also link to fiddle is given below
CHECK MY CODE HERE #JSFIDDLE
HTML
<a class="tooltip" href="#">CSS Tooltips 1
<span>Tooltip1</span></a>
</br>
<a class="tooltip" href="#">CSS Tooltips
<span>Tooltip This is not working for me </span></a>
CSS
.tooltip {
position: relative;
}
.tooltip span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
display: block;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
My issue is only half the text from <span>Tooltip This is not working for me </span> is shown in the corresponding tool-tip. I tried hard but couldn't debug it. Please help.
Thanking You
It's because you have a fixed width. To allow the tooltip to dynamically expand to the content's width remove the width property and set white-space:nowrap to keep the text inline.
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
white-space: nowrap;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/3/
EDIT
As commented bellow, if you want to keep the fixed width, but wants the text to expand in height, remove the height property of the span, and it will grow (also, don't use white-space anymore):
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
width:140px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/9/
The point is, setting a specific width or height prevents your element of growing automatically.
You need to change the width property of the second tooltip to fit all the text you want display.
Fixed Fiddle: http://jsfiddle.net/89rwu2db/8/
I added styling to the second span to increase the width.
<span style="width: 250px;">Tooltip This is not working for me </span>
Trying to apply max-width in case of text wrap for tooltip in this jsfiddle, but it applies the default width.
HTML:
<div id="container" style="margin: 167px 135px 0px 0px; height: 400px">
<a class="tooltip" tip="television">content1</a>
<a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a>
</div>
CSS:
.tooltip{
display: inline;
position: relative;
white-space: pre-wrap; /* css-3 */
margin: 20px 20px 20px 20px;
height: 30px;
width: 50px
}
.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:50px;
max-width:500px;
}
.tooltip:hover:before{
border: solid;
border-color: #8FBC8F transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
when the text in the tooltip is getting word wrapped, width should go up to some max width instead of the default width so that it is convenient for reading.
this jsfiddle works when i put display: inline-table; like below
.tooltip:hover:after{
:
:
display: inline-table;
}
But it works only in Chrome and not on IE
You have to use display:inline and max-width and for some browser use word wrap.There is a good tutorial to create css3 tooltip create css3 tooltip.
Here's some code from that tutorial:
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
max-width: 220px;
}
Stumbled upon the same problem, and after some fiddling found following workaround for my case: you have to wrap tooltip content in another element, which will have your expected max-width for the tooltip in width, and positioned absolute. Then wrapped content will use this as baseline max width while wrapping text.
Verified that it works in latest public IE/Edge/Chrome/FF at the time of writing
Codepen: https://codepen.io/jfhs/pen/LzbwgJ
In code:
<div class="tooltip">
<div class="tooltip-content-wrapper">
<div class="tooltip-content">Long long text</div>
</div>
</div>
CSS:
.tooltip {
position: relative;
}
.tooltip-content-wrapper {
position: absolute;
width: 100px; /* THIS is your max-width for tooltip */
visibility: hidden;
}
.tooltip:hover .tooltip-content-wrapper {
visibility: visible;
}
.tooltip-content {
display: inline-block;
}
Please change your CSS min-width and max-width like below:
.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:500px; /* I have changed here */
max-width:500px;
}
I came across this old question as I too was looking to see if it was possible to get min-width and max-width to work without having to add JavaScript or extra elements (as I was sourcing the tooltip text from an attribute). It turns out that changing width: auto; to width: max-content; in your jsfiddle does the trick (as suggested at: https://stackoverflow.com/a/62853552). Screenshot: