I'm following this tutorial: http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition
But I want to get the "Hover Over Me" text right next to the "When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible."
For example, the ideal output would be:
When you move the mouse over the text below, the tooltip text will
fade in and take 1 second to go from completely invisible to visible.
Hover over me
instead of
When you move the mouse over the text below, the tooltip text will
fade in and take 1 second to go from completely invisible to visible.
Hover over me
The tool tip should obviously still show up on hover. What part of the CSS would I have to change?
<!DOCTYPE html>
<html>
<style>
.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: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
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 completely invisible to visible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
What about changing the structure a little put the Hover over me text in a <span> and not a <div> and then put that inside the <p> tag like this:
<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 completely invisible to visible. <span class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</span></p>
</body>
Here is a JS Fiddle showing it
Let me explain a little as well: in HTML a <p> tag is a block element and, thus, it cannot allow other block elements inside of it (such as <div>). The <span> tag is not block, it is inline, allowing you to place it in side of a <p> tag. Often times, we use <span> tags when we want to edit text inside of a <p> tag because it doesn't break the text in the <span> tag into a new line like a <div> or a second <p> tag would do (as you saw in your example.
The reason this is on two lines is that the paragraph tag enclosing the instructions is a block level element. Meaning it will start and end a new line. You could set the display of this element in your css as inline and it should show text as inline.
p{
display: inline;
}
Related
This is my first question here, and much as I tried finding answers, I just couldn't!
So I'm creating this site-project of mine, and I've added 3 .SVG icons, that change position through "transform / translate3d()", whenever the mouse hovers on 3 buttons.
What I want, is to apply a color --ideally on top edge-- of each Bottle (the SVG icon), that is non-visible when it's stabilized, but each time the bottles move, to follow them smoothly, creating a nice effect that tracks the movement-path, that would give the impression that the bottles are filled with liquid of the specific color.
Is there a way it could happen? Thank you in advance!
**The snippet here is not working, don't bother, I just didn't know how to appropriately post a snippet here, so I only came up with what would be helpful for whoever reads it.
/*
Here's a snippet of the code from the JQuery hover() that moves the bottles,
when hovering over a button.
*/
$("#all_pr_btn").hover(function(){
$(".bottle_1").css({"transform": "translate3d(300px, 65px, 0px) rotate(10deg)"});
$(".bottle_1").find("img").css({"width": "100%"});
/* Here's my scss class, referring to 1 of the 3 bottle icons.
Other 2 are somewhat identical
*/
.bottle_1 {
width: 10%;
height: 10%;
margin: auto;
text-align: center;
font-family: arial;
transform: translate3d(-240px, -20px, 0px);
transition: transform 0.5s ease-in-out;
span {
img {
width: 30%;
transition: 0.5s ease-in-out;
}
}
}
<!--
Here's a part of my HTML code, so you can see the structure of the bottle icons.
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="right_side">
<div id="right_side_img">
<div class="bottle_1">
<span><img src="../myimages/bottle.svg"></span>
</div>
<div class="bottle_2">
<span><img src="../myimages/bottle.svg"></span>
</div>
<div class="bottle_3">
<span><img src="../myimages/bottle.svg"></span>
</div>
</div>
</div>
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
Is it possible to show a tooltip when the content can't fit inside the element? Using title attribute shows the tooltip regardless.
I've googled some examples, but there was nothing about tooltip showing conditions.
In this example I want to see the tooltip only when the text is too long:
.limiter
{
width: 100px;
}
.container
{
margin: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
<div class="limiter">
<div>Hover cells:</div>
<div class="container" title="short text">short text</div>
<div class="container" title="short">short</div>
<div class="container" title="long text long text long text">long text long text long text</div>
</div>
It is possible to use JavaScript.
Limitations:
I don't know in advance, what text a cell will contain (basically it's a template for angularjs)
I don't know in advance, what number of letters can it display
User can resize cells
I have a contenteditable div with id="textarea" I also have a few buttons that insert different texts/symbols at a cursor position. The problem occurs when I click outside of the textarea div (the text inside of buttons, too); the text/symbol is being inserted outside of the div. How can I prevent this? Can I "force focus" onto that div? I have only one textarea although I may have more in future.
For insertion, I used the code suggested by Tim Down on another thread:
Insert html at caret in a contenteditable div
here is the code for my textarea and buttons.
<div id="textarea" contenteditable="true">
<style scoped>
#example-one { margin-bottom: 10px; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 3px dashed #0090D2; }
</style>
<p id="inside">
</p>
</div>
<div id="buttons">
<button type="button" onclick="pasteProjectionAtCaret()">Π</button>
</div>
document.getElementById('textarea').onblur=function(){
document.getElementById('textarea').focus();
};
This makes it so that whenever textarea loses focus, Javascript set the focus back immediately, thus not allowing the user to leave.
The repro code is attached. It (basically) contains two div elements: red (fixed) and black (with text). When clicking on the black div, it is up-scaled and the text on it stays sharp. However, in 4 seconds the z-index of the black div changes and the black div becomes to be over the red div. Boom! Here the text becomes blurry (which is a big problem).
The "effect" is especially visible on iPhone 3GS, less noticeable on iPhone 4.
The question is: is there a solution/workaround to tweak every code, but not the red div code, so that the text on the black div will remain sharp?
I am here for any questions / clarification requests.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#main_div").bind("click", function() {
$("#wrapper").css({"z-index": -1});
$("#main_div").css({"-webkit-transform": "scale(1.4)"});
setTimeout(function() {
$("#wrapper").css({"z-index": 2});
}, 4000);
return true;
});
});
</script>
<title>Title</title>
</head>
<body>
<div id="wrapper" style="position: absolute; z-index: 2; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position: absolute; width: 972px; height: 598px; ">
<div id="main_div" style="position: relative; height: 375px; width: 610px; background-color:rgb(2,2,2); -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px;">
<div style="position: relative; padding-top: 26px; padding-right: 10px; padding-bottom: 26px; padding-left: 10px; font-size: 10px; ">
<div style="display: inline; font: normal normal normal 14px/normal arial; color: rgb(150, 150, 150); ">
<span>Here is some TEXT</span>
</div>
</div>
</div>
</div>
</div>
<div style="position: fixed; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position:fixed; bottom:0; right:0; width:70%; height:30%; background-color: red;"></div>
</div>
</body></html>
I was having similar issues with fixed-position elements dipping behind relative-positioned elements when zooming on the relative-positioned content. I was determined to figure out a solution.
When I changed the relative-positioned element back to static, all was well, but then that element was being covered by the fixed position elements. This was the reason I changed that element to relative to begin with... so I could put a z-index on it.
I also tried dynamically assigning the CSS styles of position and z-index, but that didn't seem to change anything either.
Then, I removed the 'left' CSS style from the stylesheet, and I dynamically assigned a style of 'right' via JS, with a value equal to the width of the window, minus the width of that fixed-position element, and this seemed to improve the issue, but not 100%.
Then I found your thread here, and tried your code. I uploaded an HTML file with your code to my server, then loaded that page up in my iPhone, and tried zooming around. I saw no such issues with your text being blurred. Odd enough.
So then I went back to my other page, refreshed, and all was well, even with the fixed-position elements dipping behind the relative-positioned element.
Thus, it seems this is a bug, perhaps caused by low memory or something. I'm not 100% sure, but without being able to reproduce the issue so easily, it may be hard to report such a bug to Apple's iPhone/Safari Mobile development team. :\