How can I decrease the delay that occurs before advisory information is displayed via the html title attribute, without scripting?:
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span title="Any way to make this instant?">ⓘ</span>
</p>
This would be a nice feature of HTML, if you could:
Adjust the delay.
Also display upon click (instead of just on hover).
I know how to achieve this with Javascript, so I'm only interested in HTML and CSS solutions.
To reduce the delay and show title instantly, you can do this with CSS ::after selector.
HTML: (Change title attribute to data-title)
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span data-title="Anyway to make this instant?">ⓘ</span>
</p>
CSS:
span
{
position: relative;
}
span:hover::after
{
content: attr(data-title);
padding: 5px;
width: 250px;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 5px;
background: #dc143c;
color: white;
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span
{
position: relative;
}
span:hover::after
{
content: attr(data-title);
padding: 5px;
width: 250px;
border: 1px solid #000;
position: absolute;
top: 5px;
left: 5px;
background: #dc143c;
color: white;
}
</style>
</head>
<body>
<p>
Hover over the icon at the end of this sentence
and notice the delay that occurs before the
advisory information is displayed.
<span data-title="Anyway to make this instant?">ⓘ</span>
</p>
</body>
</html>
it can be achieved using label with hidden checkbox and using animation to control the delay, that'd trigger showing it on both click and hover, when clicked you need to click it again to hide it.
input {
display: none;
}
.tooltip-contents {
opacity: 0;
user-select: none;
}
input:not(:checked) + label:hover .tooltip-contents,
input:checked + label .tooltip-contents {
opacity: 1;
user-select: initial;
}
label:hover .tooltip-contents {
animation-name: show;
animation-duration: 1s;
}
#keyframes show {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="tooltip-1">
<label for="tooltip-1">
click or hover here for tooltip
<p class="tooltip-contents">add your title text here</p>
</label>
Related
So I have this text that I want to have a link appear over. For example here is an image of what I want to appear :
When I hover on the highlighted text or when I hover on the link I want it to appear but I'm not sure how to go about this. For example I tried something similar but I can't seem to have the hover text seemlessly go with other text :
<p class="text">Espresso is coffee brewed by expressing or forcing a small amount of nearly boiling water under pressure through finely ground coffee beans.<span class="span"> Espresso is generally thicker than coffee brewed by other methods, has a higher concentration of suspended and dissolved solids, and has crema on top (a foam with a creamy consistency). <span class="hide" id="hide">Hello</span></span> As a result of the pressurized brewing process, the flavors and chemicals in a typical cup of espresso are very concentrated. Espresso is also the base for other drinks such as a caffè latte, cappuccino, caffè macchiato, caffè mocha, flat white, or caffè Americano. Espresso has more caffeine per unit volume than most coffee beverages, but because the usual serving size is much smaller, the total caffeine content is less than a mug of standard brewed coffee, contrary to a common belief.[2] Although the actual caffeine content of any coffee drink varies by size, bean origin, roast method and other factors, the caffeine content of typical servings of espresso vs. drip brew are 120 to 170 mg[3] vs. 150 to 200 mg.[4][5]</p>
And here is the css :
.span {
background-color: rgba(255, 16, 16, 0.25);
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: black;
}
.hide {
position: absolute;
display: none;
background-color: #2B2424;
color: #339CD8;
line-height: 18px;
font-size: 18px;
padding:10px;
}
.span:hover > .hide {
position: absolute;
display: block;
}
Now this only makes the item appear when the text is hovered over it, but I want the bubble to always appear in the same place relative to the text. Now this works if I switch the span tags with p tags. But If I do that, the text won't stick with all the other text around it. It does this:
Now I'm not sure what to do. Thanks in advance!! (Also I hate css so much)
i am sorry before, i want to help but 50%. I just give you some example about the dialog. sorry i cannot helpfully
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
I am trying learning basics of HTML/CSS. I learned about :hover in css, that when the cursor is hover the element, something happend according to the code written. Then, you can also use transition tag, to make the transformation take some time. But, when the cursor goes out of the element, it comes back to the original position, without making the transition, and that is horrible. Here is the code I wrote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display:block;
width: 10px;
height: 10px;
background-color: red;
border-radius:10px;
}
.required::after {
content: '';
display:inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
}
.required:hover::after{
transform: translateX(100px);
transition: 1s;
}
</style>
</head>
<body>
<label class = required>Name</label>
</body>
</html>
When cursor hover, the cube moves, in a rime of 1s. Mouse out, it instantly returns in his first position. I would like that it returns in the position in the same amount of type. Hope I'm enought clear in my description. Thanks for your help
Put transition in .required::after because putting transition here make the hover effect to take a fix amount of time for start/end of effect while putting it in :hover make its start time as fix value while it don't specify its end time.
If want to apply transition on fix property use that property name before time in transition like here you can write transition: transform 1s; so transition will be applied on transform property value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;/*Put transition here*/
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class="required">Name</label>
</body>
</html>
In addition to previous answers, which correctly tells you to move the transition property to .required::after, you also need to be careful using transform: 1s without property names. By default this will create transitions for ALL properties.
The problem is that the transition is set only for the pseudo element when the user is hovering so as soon as the hover stops the transition property goes back to the default - i.e. no transition.
Moving that transition setting into the non-hovered class setting means it is there whether hovering is takng place or not so the return will also transition.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class=r equired>Name</label>
</body>
</html>
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
I'm trying to make a basic FAQ of sorts using a simple click on element to reveal the answer to the FAQ. Spoiler..
I have found a really handy piece of coding, but everything I try I cannot prevent the mouse hover from making the answer disappear.
I need the answer to remain on the page until the user is ready to click the next FAQ.
I hope someone can help, thank you very much.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p><b>This is an FAQ</b><br />
<p>This is also FAQ click below for the answer</p>
<div class=spoiler><div>
My hidden text
</div></div>
</body>
</html>
.spoiler { display: relative; cursor: pointer; margin-bottom: 10px; margin-top: 10px; }
.spoiler:before { content: "Answer:"; position:absolute; cursor: pointer; font-weight: bold; color: #2C3635; }
.spoiler > div { cursor: default; top: 0px; display: none; position: relative; right: 10px; top: 20px; border: #A6B2A6 1px solid; background: darkgrey; padding: 0px 10px 15px 10px; border-radius: 4px; }
.spoiler > div:before { content: ""; display: block; width: 100%; height: 20px; margin-top: -20px; }
.spoiler:active > div { display: block; }
.spoiler > div:hover { display: block; }
https://jsfiddle.net/g9b3ugzh/
The HTML details and summary elements are perfect for this. The basics without any CSS required are as follows:
<details>
<summary>Answer:</summary>
<p>My hidden text</p>
</details>
JSFiddle demo
You could give the code, it is a JavaScript solution, in the JSFiddle a go.
var spoiler = document.getElementsByClassName('spoiler');
var showSpoiler = function() {
this.classList.add("show-spoiler");
}
for (var i = 0; i < spoiler.length; i++) {
spoiler[i].addEventListener("mouseover", showSpoiler);
}
Had to disable and amend some CSS too though, to make it work:
Took off position: absolute; from .spoiler:before
Took off top declarations from .spoiler > div
Removed the :hover and :active states on .spoiler
I'm applying the strikeout tag:
<s>$5,000,000</s>
But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?
You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.
I've cooked up this code which gives you total control over strike-through position and style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark {
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
}
.offsetMark {
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
}
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>
</div>
</body>
</html>
Eleven years later it is quite simple task:
s{
text-decoration: none;
position: relative;
}
s::before{
content: '';
width: 100%;
position: absolute;
right: 0;
top: calc( 50% - 1.5px );
border-bottom: 3px solid rgba(255,0,0,0.8);
}
old price: <s>$99.95</s>
Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.
This solution allows for padding, and uses the csss line-through property
It works for firefox, and chrome/ safari does it right anyway.
div.hbPrice span.linethroughOuter {
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
}
div.hbPrice span.linethroughInner {
position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link { bottom: 2px; }
div.hbPrice span.linethroughInner, x:-moz-any-link { top: 2px; }
and the mark up is something like...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
The other solution is to add a background image of a line, and make it the same colour as the text.
2021 Solution
Normally, you would use text-decoration: line-through, but you currently can't change the position of a "line-through" line.
But fortunately, you can change the position of an "underline" thanks to the new CSS property text-decoration-offset.
Here is how it works:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Although you may notice that the line seems a bit choppy. That's due to the relatively-new text-decoration-skip-ink which tries to hide the underline in places where it would overwrite the text. It's great for underlining, but fails as a strikethrough.
Luckily, we can turn that feature off, and along with some additional nice color and thickness properties, here's the final result:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
text-decoration-skip-ink: none;
text-decoration-color: red;
text-decoration-thickness: 2px;
color: gray;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Browser support is widespread with the current exception of Safari.
You could do something like this:
<div class="heading"><span>Test heading</span></div>
.heading {
position: relative;
text-align:center;
}
.heading:before {
background-color: #000000;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
}
.heading span {
background-color: #fff;
display: inline-block;
padding: 0 2px;
position: relative;
text-align: center;
}
http://codepen.io/anon/pen/cLBls