I'm a guitar player, not a coder, but I have a guitar lesson site I'm trying to upgrade. (Sorry if I screw up posting the code below.) I have a tooltip positioning problem that uses HTML and CSS. I wonder if anyone can help. If you roll over it on this page, you'll see what I'm wanting it to do. (It also needs to work on mobile touchscreens.) Thanks.
https://codepen.io/Daverino/pen/zboNoQ
.toolTipDiv {
float: none;
width: 275px;
margin-left: 20px;
}
.toolTipLink a {
display: block;
color: #202020;
background-color: transparent;
width: auto;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #878787;
line-height: 17px;
}
.toolTipLink a:hover {
background-color: #ddd;
color: #9B0E11;
padding-left: 10px;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 7px 10px;
margin-top: -80px;
/* this doesn't do anything:
margin-bottom: [any value]px;
*/
margin-left: 200px;
width: 140px;
line-height: 16px;
opacity: 0.85;
}
a.tooltip:hover span {
display: inline;
position: absolute;
color: #EEE;
background: #000;
}
<body>
<p> </p><p> </p><p> </p><p> </p>
<div class="toolTipDiv">
<span class="toolTipLink">
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
</div>
</a>
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
<span>The bottom of this tooltip is too low. It should be just above the line.</span>
</div>
</a>
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Here is a shorter line of text.</div>
<span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
</div>
</a>
<a href=“#” class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>This tooltip is way too high.</span>
</div>
</a>
</span>
</div>
</body>
For "span", you said it was absolute, but didn't give any positioning information. In this case add "bottom":
position: absolute;
bottom: 0em;
There also isn't anything for it to be relative to, so add:
.tooltipWrapper { position: relative; }
I suggest you check out Tippy.js its a cool tooltip and popover library, it's highly customizable.
A guy at a Facebook group called HTML CSS JAVASCRIPT wrote a codepen that fixed it. Apparently I'd messed up the absolute and relative positioning.
https://codepen.io/jkarkosza/pen/WmopbP
.toolTipDiv {
float: none;
width: 275px;
margin-left: 20px;
}
.toolTipLink a {
display: block;
color: #202020;
background-color: transparent;
width: auto;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #878787;
line-height: 17px;
}
.toolTipLink a:hover {
background-color: #ddd;
color: #9B0E11;
padding-left: 10px;
}
a.tooltip {
position: relative;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 7px 10px;
position:absolute;
bottom: 100%;
color:#EEE;
background:#000;
/* margin-left: 200px; */
width: 140px;
line-height: 16px;
opacity: 0.85;
}
a.tooltip:hover span{
display:block;
}
<body>
<p> </p><p> </p><p> </p><p> </p>
<div class="toolTipDiv">
<span class="toolTipLink">
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
</div>
</a>
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
<span>The bottom of this tooltip is too low. It should be just above the line.</span>
</div>
</a>
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Here is a shorter line of text.</div>
<span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
</div>
</a>
<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>This tooltip is way too high.</span>
</div>
</a>
</span>
</div>
</body>
Related
I have a piece of text (let's call it the "title"), and a "badge" on the right. I want the badge to stick to the end of the title when the title breaks.
As in the following snippet, I could achieve this by setting the display of both the title and badge elements to either inline or inline-block:
.container {
padding: 20px;
border: 2px solid gray;
}
.small-container {
max-width: 300px;
}
.title {
display: inline;
font-size: 2em;
}
.badge {
display: inline;
height: 20px;
padding: 0 10px;
background-color: yellow;
border-radius: 15px;
margin-left: 10px;
}
<p style="color: gray">In a normal state:<p>
<div class="container">
<span class="title">This is the title of the product</span>
<span class="badge">3.4 rating</span>
</div>
<p style="color: gray; margin-top: 30px">Now, when the container is not wide enough, the text breaks and the badge stays at the end of it, exactly what we want:<p>
<div class="container small-container">
<span class="title">This is the title of the product</span>
<span class="badge">3.4 rating</span>
</div>
With flexbox, on the other hand, the following snippet is what I've done, but the badge, in this case, doesn't stick to the end of the title when the title breaks, it instead creates a new line by itself:
.container {
padding: 20px;
border: 2px solid gray;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.small-container {
max-width: 300px;
}
.title {
display: inline;
font-size: 2em;
}
.badge {
display: inline;
height: 20px;
padding: 0 10px;
background-color: yellow;
border-radius: 15px;
margin-left: 10px;
}
<p style="color: gray">In a normal state:<p>
<div class="container">
<span class="title">This is the title of the product</span>
<span class="badge">3.4 rating</span>
</div>
<p style="color: gray; margin-top: 30px">Now, when the container is not wide enough, the text breaks, BUT the badge goes to new line by itself:<p>
<div class="container small-container">
<span class="title">This is the title of the product</span>
<span class="badge">3.4 rating</span>
</div>
How do I achieve a similar result to my first snippet when I have a flex container?
Wouldn't it make sense to treat the whole thing as one flex-item? That way they will remain together as if inline.
<span class="title">This is the title of the product<span class="badge">3.4 rating</span></span>
I'm attempting to make a webpage where there are several images as links for visiting separate pages, and I want to make a popup show next to the image with a summary, title, and other details of the page in HTML (maybe a button "Read More" or something). I'm trying to create a popup similar to
this one:
I've got my images already, and I can't find a template where there's a separate popup next to the image, because all the image css transition links have the title and text inside the image rather than next to it as a popup. Is this to complicated to do in CSS, or is it possible?
Thanks in advance! If there is any need for clarification in my question, please ask!
<a href="SecretPlants.html">
<img class="imgLinks" src="file:///E:/Grace/Art/Animation-Computing/Website/ContentTABS/ResourceFiles/Literature/TheSecretsHeldInPlants/SecretLifeofPlantsCover.jpg" alt="Link to Plants Research Paper" height="300">
<a href="EmbraceDifferences.html">
<img class="imgLinks" src="Embrace Differences Cover Image.jpg" alt="Link to Plants Research Paper" height="300">
<a href="Teams of Teams, Hierarchy of Teams, and Hierarchy Essay.html">
<img class="imgLinks" src="Cover.jpg" alt="Link to Hierarchy and Team Critical Essay" height="300">
I create an example for you, hopefully it can usefull for you :
HTML :
<div class="button">
<img class="parentPic" src="http://lorempixel.com/400/200/sports/1" alt"test" />
<section class="speech">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
</a>
</div>
<div class="well well-sm">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown</div>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
</div>
<div class="col-md-2"></div>
</div>
</section>
</div>
CSS :
.button {
position: relative;
}
.button > img {
display: inline-block;
color: #fff;
padding: 0.4em 0.6em;
font-size: 1.3em;
}
.button section {
display: none;
position: absolute;
top: 2em;
left: 32em;
padding: 20px;
margin: 0;
border: 5px solid #fd0;
background: white;
border-radius: 1em;
}
.button section > p {
display:block;
text-align:center;
}
}
.button .parentPic {
display: block;
border-radius: 0.8em;
max-width: 100%;
height: auto;
}
.button:focus section,
.button:hover section {
display: inline-flex;
top:0px;
}
.speech {
position: relative;
width: 300px;
height: 400px;
text-align: center;
line-height: 20px;
background-color: white;
border: 8px solid #fd0;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
.title{
text -align:center;
}
.speech > p{
padding:15px;
}
.speech:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
border: 0px solid;
border-color: #fd0 transparent transparent #fd0;
}
.speech:after {
content: '';
position: absolute;
width: 0;
height: 0;
left: -29px;
top: 50px;
border-top: 13px solid;
border-left: 25px solid;
border-right: 3px solid;
border-top-left-radius: 39px;
border-bottom-left-radius: 41px;
border-color: #fd0 transparent transparent #fd0;
}
https://jsfiddle.net/emilvr/9x7j430L/3/
You can just make the popup div with position:absolute and not setting its coordinate to make it popup next to it
for example this one is done without using javascript, using css a:hover
<html>
<head>
<style>
#popup0 {
visibility:hidden;
position:absolute;
z-index:1;
}
#link0 {
display:inline;
}
#popup0 {
display:inline;
}
#link0:hover #popup0{
visibility:visible;
position:absolute;
}
#something {
display:inline;
}
</style>
</head>
<body>
<a href="" id="link0">
hover here
<img id="popup0" src="yourfile.png" />
</a>
<div id="something">
other things next to it
</div>
</body>
</html>
I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>
A <p> tag, that is supposed to be inside a <div> tag in code, is stacked under it when the website shows.
The paragraph with id "p1" needs to be displayed inside the div with id "text".
I'd like to draw your attention to the three big boxes to the left of the screen.
Box 1: This box is empty.
Box 2: This is the one that says 'Career'.
Box 3: The box under is the div I'm having problems with. The text just below it is the text that needs to be in the div. This div's id is "text", and the one it should look similar to is "main".
#banner {
background-color: #FFFFFF;
float: left;
width: 30%;
height: 71px;
border: 2px solid;
}
#button {
background-color: #FFFFFF;
border: 2px solid;
float: left;
width: 15%;
height: 71px;
}
#fixbutton {
background-color: #FFFFFF;
border: 2px solid;
float: left;
width: 15%;
height: 71px;
}
#main {
background-color: #FFFFFF;
height: 204px;
width: 23%;
float: left;
border: 2px solid;
}
#picture {
background-color: #FFFFFF;
height: 575px;
width: 55%;
float: left;
border: 2px solid;
}
#text {
background-color: #FFFFFF;
height: 650px;
width: 23%;
border: 2px solid;
text-align: center;
}
#additionaltext {
background-color: #FFFFFF;
height: 575px;
width: 21%;
float: right;
border: 2px solid;
}
#p1 {
text-align: center;
font-size: 150%;
}
#button:hover {
background-color: #ffff99;
}
#fixbutton:hover {
background-color: #ffff99;
}
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>
</title>
</head>
<body>
<div id="banner" id="banner"></div>
<a href="index.html">
<div id="button">
<p id="p1">Home</p>
</div>
</a>
<a href="about.html">
<div id="button">
<p id="p1">About Me</p>
</div>
</a>
<a href="career.html">
<div id="button">
<p id="p1">Career</p>
</div>
</a>
<a href="school.html">
<div id="fixbutton">
<p id="p1">Schooling</p>
</div>
</a>
<div id="main">
<p align="center" style="font-size:400%">Career</p>
</div>
<div id="picture">
<img height="575" width="751" src="4-photos.jpg" />
</div>
<div id="additionaltext"></div>
<!-- THE DIV -->
<div id="text">
<!-- THE PARA -->
<p id="p1">My dream career would be art. I really want to be able to draw concept art, background art, storyboards, character art, and animate 2D (and maybe 3D) assets as well.</p>
</div>
</body>
</html>
Try removing the Div with Id="text" the put the P tag with ID p1 into the id="additionaltext". and in your css remove the style for the ID text.
I tried it and it worked fine
JSFiddle
<div> All divs of the line </div>
<div> All divs in the next block</div>
It is better to allways create divs for each line and then you can style their widths relativly to its parent div so they have for example to sum up 100% in width when they are placed one by one.
Your use of the float property changes how the DOM layout appears on the screen.
Some resources you should review to help understand what is happening:
http://www.w3schools.com/css/css_float.asp
https://css-tricks.com/all-about-floats/
(The title might sound stupid but I don't know how to put it more sophisticated.)
As you can see in the follwing screenshots, I have 3 stacked divs.
<div class="col-xs-3">
<div class="center-horizontal-inline">
<a class="upvote" href="#" data-id="iZheLNnewWtMhPTQd">
</div>
<div class="score">
115
<span class="badge score-diff vertical-align"> +5 </span>
</div>
<div class="center-horizontal-inline">
</div>
The one in the middle contains the number (115). The other two the vote-arrows. For the one containing the number, I want to add a "badge" (in bootstrap context) right next to the number, let's say to the right. You can see my attempt shining through the colored overlay.
The goal is to leave the number centered respectively to the arrow-icons, while placing the badge with an offset (or "right next to") respectively to the number.
My attempt was to set a float: right; for the badge, but as you can see, the number has an offset now. When I try position: absolute; on the badge, there is no offset (as wanted), but I can't get the badge right next to the number, I can only attach it to the right border because I don't have the number as positioning-reference anymore.
Hope my explanation was clear enough. I also didn't know how to search for that problem...
EDIT 1:
As I want it to look like (positioning-wise):
Here we go, using relative and absolute positions together:
DEMO: http://jsfiddle.net/1qbo7uwn/
HTML
<div class="score">
<span class="score-wrap">
<span class="score-main">123</span>
<span class="score-diff">8</span>
</span>
</div>
CSS
.score {
width: 80px;
border: 2px solid blue;
padding: 10px 0;
text-align: center;
}
.score-wrap {
display: inline-block;
position: relative;
}
.score-main {
border: 2px solid green;
}
.score-diff {
position: absolute;
border: 2px solid red;
left: 100%;
top: -2px;
}
Added some span tags in the HTML.
EDIT: vertical align of everything, by setting line height.
http://jsfiddle.net/1qbo7uwn/1/
As you said you are okay with HTML modification. Here's my attempt:
Demo Fiddle
HTML
<div class="wrap">
<div class="vote up">
<i class="fa fa-angle-up"></i>
</div>
<div class="stat">
<span class="score">115
<span class="badge">+5</span>
</span>
</div>
<div class="vote inactive">
<i class="fa fa-angle-down"></i>
</div>
</div>
CSS
.wrap{
margin: 100px;
text-align:center;
}
.vote{
font-size:36px;
}
.up{
color:green;
}
.down{
color:red;
}
.inactive{
color:gray;
}
.score{
position: relative;
display:block;
padding: 5px 0;
}
.badge{
background: #eee;
padding:5px 10px;
border-radius: 30px;
position: absolute;
top:0;
margin-left:10px;
}
Try
Demo: http://jsfiddle.net/tamilcselvan/rjv1xxo2/1/
.center-horizontal-inline {
font-size: 2em;
text-align: center;
}
.score {
text-align: center;
}
.score:after {
content:attr(data-badge);
position: absolute;
margin-left: .4em;
font-size: x-small;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #FFF;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #777;
border-radius: 10px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-3">
<div class="center-horizontal-inline vote"> <i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="score" data-badge="+5">115</div>
<div class="center-horizontal-inline"> <i class="glyphicon glyphicon-chevron-down"></i>
</div>
</div>