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;
}
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.
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 have a container element that somewhere in its tree contains another element, whose visibility should be toggled when hovering over the container element. This works fine
.container .toggle {
visibility: hidden;
}
.container:hover .toggle {
visibility: visible;
}
Problem is, when I nest two containers with separate .toggle elements both elements are visible when hovering over the parent container.
The easiest fix is to change add a > into the :hover css selector. That works fine as long as the .toggle element is a direct child of the .container element.
In my use case I cannot guarantee that this is the case, the number of elements between the .container and .toggle element must be variable.
My best guess was a CSS the selector .container:hover *:not(.container) .toggle
trying to select every child of a container, that is not a child of another container... sadly that is not working
Here's the fiddle: http://www.w3schools.com/code/tryit.asp?filename=F0N00I8GETY0
Any hints welcome, thank you in advance :-)
If you are willing to stipulate the maximum nesting level, you can do this as follows.
div { outline: red 1px solid; }
/* Hide toggle elts by default. */
.toggle { visibility: hidden; }
/* Show toggle elts whose container is hovered. */
.container:hover .toggle { visibility: visible; }
/* Unless there is a non-hovered container in between! */
.container:hover .container:not(:hover) .toggle { visibility: hidden; }
<div class="container">
OUTSIDE CONTAINER
<div class="toggle">OUTSIDE TOGGLE</div>
<div class="container">
INSIDE CONTAINER
<div class="toggle">INSIDE TOGGLE</div>
</div>
To support three levels of nesting, you'd need a rule such as
.container:hover .container:hover .container:not(:hover) .toggle { visibility: hidden; }
the easiest thing I can think of is to toggle the visibility of the inner .toggle elements to hidden when toggling the parent .toggle element.
.container .toggle {
visibility: hidden;
}
.container:hover .toggle {
visibility: visible;
}
.container:hover .toggle .toggle {
visibility: hidden;
}
but then again this code wont allow you to toggle the nested .toggle elements' visibility, so you must add to the code above:
.toggle:hover .toggle {
visibility: visible;
}
but this only works as intended when you only have two nested .toggle elements. And I'm afraid to say if you wanna toggle more nested elements you need to use js.
If container is always in div, something like this could work
.container:hover div:not(.container) .toggle, .container .container:hover .toggle, .container:hover > .toggle {
visibility: visible;
}
I have seen similar post on stack exchange where you can change css of another div when hovered over one div. However in my case it is not working as I am using this with a table cell.
Here, is the HTML code:
body {
padding: 5%;
}
.tbdata {
background-color: royalblue;
color: white;
cursor: pointer;
}
.tooltip {
color: white;
opacity: 0;
transition: opacity 1s;
background-color: red;
min-width: 50px;
min-height: 100px;
}
.tbdata:hover ~ .tooltip {
opacity: 1;
}
.tbdata:hover ~ .tooltip:after {
content: attr(data-);
}
<table>
<tr>
<td class="tbdata" data-="This is the tooltip text for col1">This is table data1</td>
<td class="tbdata" data-="This is the tooltip text for col2">This is table data2</td>
</tr>
</table>
<div class="tooltip">
</div>
I want to make the .tooltip div visible when hovered over the .tbdata and also change the content using attr() from the table cell.
Please suggest.
I used Jquery for this solution.
$('document').ready(function(){
$('.tbdata').hover(
function(){
$(".tooltip").css("visibility","visible");
$(".tooltip").attr("attrname","attrvalue"); //attribute
},
function(){
$(".tooltip").css("visibility","hidden");
$(".tooltip").attr("attrname","attrvalue"); //attribute
}
);
});
Here is example:
Fiddle
You cannot change the content property dynamically on hover, however, you can use some "trickery" to hide a span and show another.
This example below shows how you can do just that. This, as far as I know, is the best solution for a non-JS implementation of dynamically changing a div content on hover
.button{
background:lightblue;
width:200px;
}
.tooltip{
background:red;
width:200px;
}
.tooltip .before { display: block; }
.tooltip .after { display: none; }
.button:hover .tooltip{
background:green;
}
/* Hide the `.before` and show the `.after` */
.button:hover .tooltip .before{ display:none; }
.button:hover .tooltip .after { display:block; }
<div class="button">
Hover over me!
<div class="tooltip"><span class="before">Turn nothing</span><span class="after">Into something</span></div>
</div>
To hide/show the content, you would also apply display property changes to the .tooltip. I've left both div visible for this demonstration, however, to show the changing content.
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.