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>
Related
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/
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>
I've found other examples of text in the background but not animated. I want it to be positioned like this.
Here's what I'm working with. https://jsfiddle.net/3esj55rb
.marquee {
color: #333;
padding-left: 1.5em;
position: relative;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
width: 450px;
margin: 2em auto
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 25s linear infinite;
}
.marquee:hover {
color: #F65314;
animation-play-state: paused
}
#keyframes marquee {
0% {
text-indent: 27.5em
}
100% {
text-indent: -105em
}
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before,
.microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em;
left: -1em;
width: .5em;
height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314, 1.6em 1.25em 0 #7CBB00, 1.0em 1.85em 0 #00A1F1, 1.6em 1.85em 0 #FFBB00;
}
.microsoft:after,
.microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255, 255, 255, 0));
}
/* Style the links */
.vanity {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
color: #F65314;
}
.text {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.topText {
color: #333;
text-align: left;
font: 20px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
margin-top: 70px;
}
<p class="topText">
Boston, city, capital of the commonwealth of Massachusetts,
and seat of Suffolk county, in the northeastern United States.
It lies on Massachusetts Bay, an arm of the Atlantic Ocean.
The city proper has an unusually small area for a major city,
and more than one-fourth of the total—including part of the
Charles River, Boston Harbor, and a portion of the Atlantic—is water.
Area city, 46 square miles (119 square km).
</p>
<p class="marquee"> Visit Boston. This text should be in the background</p>
<p class="text">
The area, the people, and the institutions within its political
boundaries can only begin to define the essence of Boston. Its
nickname “Beantown” has its origin in colonial times, when Boston,
as a stop on a major trade route with the West Indies, had a steady
supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans
baked in molasses).
</p>
<p class="vanity">
Follow us on twitter
#boston to know more.
</p>
<p class="vanity">
Test test
click here for website or our state's mass.gov
</p>
Added z index and made position relative to the container.
.marquee {
color: #333;
padding-left: 1.5em;
font: 50px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
margin: 2em auto
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite;
z-index: -1;
position: fixed;
width: 450px;
top: 15%;
}
With the use of CSS you can define #keyframes so that you can create different positions, sizes, angels and properties of an object.
for your reference:
#keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
Here you can find the resources:https://css-tricks.com/css-techniques-and-effects-for-knockout-text/
Short answer
You have to play with position (relative / absolute along with top). Beware of children ordering. Also, when you need to stop the animation when hovering, make sure you are putting the :hover listener to the proper tag.
Long answer
For the sake of playing with position, I came up with a solution. However, this solution requires text duplication.
The idea is as follows:
A container will contain three children
The first child is the first text. It is invisible and its purpose is to fix the container height
The second child is the sliding text. With a position: absolute, it has to vertically align its content via a subcontainer.
The third child is the displayed text with an absolute position as well
I expanded the original text to ensure that my marquee is properly vertically aligned.
Cons
Text is displayed twice
a lot of CSS classes & container but it is always like this, isn't it?
Pros
You can put whatever you want in the .marquee__content, not only a p but also some h2 or h3 or some picture, it should all slide. the .marquee *{...} style ensure that all children do not wrap text
CSS clearer separation: which div is what
Finally the code:
/* ========== Container ========== */
/* cosmetic only */
body {
background-color: #cacaca;
}
.container {
/* Required for playing with positions ! */
position: relative;
/* irrelevant: cosmetic only */
width: 60%;
margin: auto;
background: white;
}
/* ========== Text =============== */
/* define all text size so that height fixer can
have the appropriate height */
.text {
/* to ensure both box__text have same height */
font-size: 20px;
/* cosmetic only */
padding: 1rem;
box-sizing: border-box;
}
/* this hack requires an invisible box__text to set
parent div height */
.text--height-fixer {
visibility: hidden;
}
.text--shown {
position: absolute;
/* move to top of parent */
top: 0;
/* take parent width / height */
width: 100%;
height: 100%;
}
/* ========== Marquee ============ */
.marquee {
position: absolute;
/* move to top of parent */
top: 0;
/* take parent width / height */
width: 100%;
height: 100%;
/* hide x overflow for the slide effect */
overflow-x: hidden;
/* vertically align content. I chose display: flex as
I am lazy but this is not the core of the question */
display: flex;
/* cosmetic only */
padding: 1rem;
box-sizing: border-box;
opacity: 0.6;
}
/* force one line layout for all children, not only <p> */
.marquee * {
/* remove line break */
white-space: nowrap;
/* remove all default margin */
margin: auto;
}
/* to match the provided picture */
.marquee .boston {
color: lightblue;
font-size: 4rem;
font-weight: 800;
transition: color 0.2s;
}
#keyframes marquee {
0% {
margin-left: 100%;
}
100% {
margin-left: -100%;
}
}
.marquee__content {
animation: marquee 10s linear infinite;
}
/* this is the tricky part: the "hover" event should not be listened
on marquee but on the container */
.container:hover .marquee__content {
animation-play-state: paused;
}
.container:hover .marquee .boston {
color: orange;
}
<!-- container to manage all positions. Children order matters !-->
<div class="container">
<!-- relative must be first -->
<div class="text text--height-fixer">
<p>
The area, the people, and the institutions within its political boundaries can only begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had
a steady supply of molasses from the Caribbean, thus leading to the creation of a popular dish that became known as Boston baked beans (beans baked in molasses). The area, the people, and the institutions within its political boundaries can only
begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had a steady supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans baked in molasses).
</p>
</div>
<!-- marquee should be declared before text so that it appears below without z-index -->
<div class="marquee">
<div class="marquee__content">
<p class="boston">
Visit Boston. This text should be in the background
</p>
</div>
</div>
<div class="text text--shown">
<p>
The area, the people, and the institutions within its political boundaries can only begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had
a steady supply of molasses from the Caribbean, thus leading to the creation of a popular dish that became known as Boston baked beans (beans baked in molasses). The area, the people, and the institutions within its political boundaries can only
begin to define the essence of Boston. Its nickname “Beantown” has its origin in colonial times, when Boston, as a stop on a major trade route with the West Indies, had a steady supply of molasses from the Caribbean, thus leading to the creation
of a popular dish that became known as Boston baked beans (beans baked in molasses).
</p>
</div>
</div>
If anyone has a better solution which allows any marquee content (not limited to a single p), feel free to share!
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.
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