Isn't opaque supposed to mean opaque??
In particular, I've been experimenting with tooltip boxes in HTML application coding. So far I have appropriated the following CSS code:
/* Begin Tooltip Tomfoolery */
.tooltip {
position: relative;
display: inline;
border-bottom: 2px solid magenta;
}
.tooltiptext {
color: magenta; background-color: yellow;
text-align: justify;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
border-radius: 6px;
padding: 5px 0 0 .25in;
/* Position the tooltip */
position: absolute;
top: 100%;
left: 200px;
margin-left: -60px;
}
.tooltip:hover .tooltip {
visibility: visible;
z-index: 0;
}
.tooltip:hover .tooltiptext {
visibility: visible; filter: alpha(opacity=100);
z-index: 1;
}
/* -End- Tooltip Tomfoolery */
My tooltip boxes come out okay, but when I hover my mouse over one tooltip label, the text from neighbouring tooltip labels keeps bleeding through the chosen label's tooltip text, sometimes making the requested tooltip all but illegible. Text outside of tooltip labeling appears to be covered adequately. I've formatted my tooltip label-text combinations as below:
<span class="tooltip"><em>Tooltip LABEL</em
><span class="tooltiptext">Tooltip TEXT</span></span>
exempli gratia:
<!-- earlier text --><span
class="tooltip"><em>Krigah! Tarzan Bundolo!</em><span
class="tooltiptext" style="left: 75px"
>Beware! The Albino Kills!
(and he ain't swingin' from no
consarned rubber BAND neither!)</span></span><!-- later text -->
(Aside: I don't know if your system allows tags to be split before the closing angle, but mine seems not to complain—plus it does allow me to control my line lengths for better source-code legibility.) I tried playing with opacity and other field properties, but I think I've pretty much run out of options. Any help you can provide will be deeply appreciated.
Related
I wrote
"
Home<i class="fa fa-home" fa-3%>
"
But it does not work...
Plz answer my Quz--and if u can, show me the syntax example
Use title attribute
like title="Cat chattering ekekekek"
Tooltips are little boxes containing helpful text that appear when you hover over certain elements in a web page. They’re a useful UI component for providing additional information to users without having to clutter the interface. In this tutorial we’ll be creating a simple tooltip using HTML & CSS with no JavaScript required.
Following code is the example of how to add tooltip text.
<style>
/* 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;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
I hope you'll like this.
So I thought it'd be a great idea to add tooltips to my Neocities site, but I seem to have run into an issue I can't find the answer to...
Okay for some ungodly reason my tooltip class isn't working. I assigned my div the class, and the span inside it the tooltiptext class, but it would still just use what I had assigned the body. I only noticed this when the text was still white, when it should've been black, among other things.
Here's the html section:
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
I'm including the header and image parts because I'm desperate and worry the answer lies within one of the miniscule details
here's the stylesheet:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
Once again all copy+pasted from w3schools just to make sure it wasn't me
Like I said, the text of the tooltip-assigned div still has white text, and nothing from the tooltip class...
Either the body is overriding my class, or there's something going on with the class itself that's stopping it from working.
I don't know if this helps, but I have assigned a class to my body, which works perfectly fine. I'm wondering if there's something going on with it? I mean, it shouldn't, because I have another page using said class, along with divs using other classes that work perfectly fine!
.door {
margin: 0 auto;
background-image: url("https://64.media.tumblr.com/1adbeafb3ca992a7681ede48ddedcbbd/d5886a952040c00b-9b/s250x400/a917bb1772111a1460eac4922c0502e0ba860bd1.jpg");
/*position: relative;*/
width: 600px;
height: 900px;
text-align: center;
}
I apologize if I'm not making much sense, I'm not super familiar with certain html and css terms.
In this snippet based on your code, the tooltip text is black:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
If you're using other libraries with their own CSS or are deploying this on a third-party website, there could be a namespace collision. You can check what styles are applying to an HTML element using the Chrome DevTools or similar tools in other browsers. Here is a guide for doing this in Chrome: https://developer.chrome.com/docs/devtools/css/overrides/
I am trying to add a popup when hover on my text (span).
I'm trying to do it like they explain in W3schools:
https://www.w3schools.com/css/css_tooltip.asp
But I am already using style in my span to color the text that I want to hover, so if I add the class with the properties from w3schools to my span the text is gonna be hidden since they have visibility: hidden; in the span class.
I am very new to this, so I would be glad if someone could help me.
If you want to add color to the span text (My text) then add a color property to .tooltip class in the w3schools example
However if your goal is adding color to tooltip text then adjust the color property in .tooltip .tooltiptext{}
This is the same example from w3schools
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* color of the span text */
color: rgb(119, 162, 241);
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
/* color of the tooltip text */
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">My text</span>
</div>
I'm also very new to HTML and CSS, but I'll try to answer, anyway.
You can try to nest spans...
Taking W3Schools' code as an example, it will look something like this:
.p {
text-align: left;
}
.firstSpan {
color: rgb(119, 162, 241)
}
.firstSpan .secondSpan {
visibility: hidden;
width: 120px;
background-color: gray;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.firstSpan:hover .secondSpan {
visibility: visible;
}
<p>Let's try some 'nested' spans.</p>
<p>This is some text in a paragraph. You can hover <span class="firstSpan">over me<span class="secondSpan">Some text.</span></span> and you'll see some text.
</p>
<p>Another text in another paragraph. Hover <span class="firstSpan">over me<span class="secondSpan">A hint.</span></span> and you'll see some text — Maybe a hint.
</p>
Depending on what you want, nested spans may not be the best practice, but if what you're looking for is a simple inline container... go for it.
I hope I was helpful. 😉
I'm trying to create hover messages for each field that the user needs to fill out. The first hover message is centered how I want it, but when i try to create the same effect for the next field, the hover message is displayed in the wrong position. I'm not sure what I need to change in the CSS to get the same effect for all messages.
I've tried changing the position, but it didn't help, not sure what else is relevant to this issue.
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -35px;
left: -295%;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div className="tooltip" style={{ "fontSize": "12px", "fontWeight": "bold" }}> Hello
<span className="tooltiptext"> <p>{this.state.page_options.hoverMessages.hello}</p> </span>
</div>
Since you haven't shared your HTML code and its CSS, I'd assume the wrong display of tooltip is happening because of position: absolute in your tooltip's CSS.
It seems that the main problem is the left: -295% property. I'm not sure why you were doing it as a percentage, but if you use a negative pixel value (since you have a hardcoded pixel width), it should work.
Note: <span> is an inline element, so it cannot contain block-level elements like <p>.
Try my sample on codepen.
I'm not sure what tool you are using, but I converted the placeholders into real HTML attributes and CSS. I also commented out the inline-block property of the tooltip class, but it works either way.
Note: I used a calc function for the left property, just to show its relationship to the hardcoded width of 200px.
Based on Brian's suggestion, I changed the left: -295% to a pixel value instead. I also made each field have specific top attributes as such:
<div className="tooltip" style={{ "fontSize": "12px", "fontWeight": "bold" }}> HELLO?
<div className="tooltiptext" style={{ "top": "-102px" }}>
<p>{this.state.page.hello}</p>
</div>
</div>
I have some external CSS from W3Schools:
/* Tooltip container */
.tooltip {
/*position: relative;*/
display: inline-block;
}
/* 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: 20;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
span:hover .tooltiptext {
display: none;
}
Which should apply some rules for the folowing block of html:
<div class="CELL_INFO tooltip">
<span class="tooltiptext">
Square resources: '.$WOOD.' wood, '.$IRON_ORE.' iron ore, '.$STONE.' stone.
</span>
</div>';
There you should be able to display tooltip contained in the <span class="tooltiptext"> by hovering over the <div class="CELL_IFNO"> and then, if you hover over that tooltip span itself (or when the cursor leaves the containing div), it should disappear. And because you are not hovering over that div anymore, the tooltip should stay hidden.
Basicly what I ma trying to achieve is that I have tooltip, which is shown ONLY when you are hovering the parent div, not the child tooltip span itself.
My example is not working and I have no idea how to do it by pure CSS. Can someone explain, what is goin on?
NOTE:
When the display: none; property is bound to span in global, it works, but i need it to work only for spans with the "tooltiptext" class.
You need to remove the space in your selector
Try span:hover.tooltiptext instead of span:hover .tooltiptext
With the space in between, it selects elements with class .tooltiptext which are inside span:hover elements.
Your last rule says that you want to select a .tooltiptext element contained within a span. What it sounds like you meant to do is select a span that has the .tooltip class. try this:
span.tooltiptext:hover {
display: none;
}
or simply,
.tooltiptext:hover {
display: none;
}