I have made a tooltip on hover over an icon and it works fine in desktop view.
Working Snippet:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip img {
width: 15px;
}
.tooltip .tooltiptext[data-position="bottom"] {
visibility: hidden;
width: 400px;
background-color: #fff;
color: #000;
text-align: center;
border-radius: 0.5rem;
border-width: 1px;
border-color: #e2e8f0;
padding: 5px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<label> Some Label </label>
<span className="ml-2">
<div class="tooltip">
<img
src="https://www.svgrepo.com/show/2297/doubts-button.svg"
alt="help text"
/>
<span data-position="bottom" class="tooltiptext">
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 of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</span>
</div>
</span>
Whereas in mobile view, this leads to horizontal scroll bar.
Please switch to mobile view to see the issue.
Things I tried:
I have tried removing margin-left and modified left value like,
.tooltip .tooltiptext[data-position="bottom"] {
visibility: hidden;
width: 400px;
.
.
.
.
.
left: 0%;
margin-left: 0px;
}
But this doesn't work... Kindly please help me to make this tooltip responsive in mobile devices using CSS. Big thanks in advance.
Just add the following css:
#media screen and (max-width: 576px) {
.tooltiptext {
width: 300px;
}
}
Related
The above photo is the output of the CSS code; it was supposed to display 2 columns (#leftcolumn and #rightcolumn) with some random text inside the 2 columns respectively, but the output displayed just the #leftcolumn with the text in it alone.
Please, how do I solve it?
body {
margin: 0;
padding: 0;
line-height: 1.5em;
}
#header {
background: black;
font-family: Arial;
height: 100px;
}
#contentwrapper {
float: left;
width: 100%;
}
#contentcolumn {
margin: 0px 230px 0px 230px;
}
#leftcolumn {
float: left;
width: 230px;
margin-left: -230px;
background: #f0071b;
}
#rightcolumn {
float: left;
margin-left: -230%;
width: 230px;
background: #20e6d2;
}
.innertext {
margin: 20px;
font-family: Arial;
color: #d6a7c4;
text-align: justify;
}
#footer {
clear: left;
/* Cannot float on left */
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
/* Responsive Css Layout */
#media (max-width: 840px) {
/* drop Right Column Drop Down */
#leftcolumn {
margin-left: -100px;
}
#rightcolumn {
float: none;
width: 100% margin-left: 0;
clear: both;
}
#contentcolumn {
margin-right: 0;
/* left margin to leftcolumnWidth */
}
}
#media (max-width: 600px) {
/* Drop left column down */
#leftcolumn {
float: none;
width: 100%;
clear: both;
margin-left: 0;
}
#contentcolumn {
margin-left: 0;
}
}
<div id="container">
<div id="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<b>Welcome!</b><br />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 of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at
its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors
now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and
the like).
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertext">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
</div>
<div id="rightcolumn">
<div class="innertext">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first
true generator on the Internet.
</div>
</div>
<div id="footer">Footer</div>
</div>
margin-left: -230%; moves the element out of the visible area (230% to the left). Erase that and you'll see it again.
Or did you mean pixels instead of percent?
As I understood I created a design using your code. Get some Idea if you expect this way
I have used
display:flex
method, have a look
.header{
background: black;
font-family: Arial;
height: 100px;
}
.contentwrapper{
display: flex;
}
.footer{
clear: left;
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
.leftcolumn {
background: #f0071b;
}
.rightcolumn {
background: #20e6d2;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
<div id="container">
<div class="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="contentwrapper">
<div class="leftcolumn">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
<div class="innertext">
<b>Welcome!</b><br />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 of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour
and the like).
</div>
<div class="rightcolumn">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
first true generator on the Internet.
</div>
</div>
<div class="footer">Footer</div>
</div>
I have a text and when I press on icon I can read more, and when press on another icon I can read less. The question is that how can make indent of top, for read more and read less icons to see them below than text, and make them(icons) in the center? The icons are +, -.
This is html:
<p>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 of type and scrambled it to make a type specimen book.
<input id="read-more-state-1" class="read-more-state" type="checkbox">
<span class="read-more-target">
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</span>
<label for="read-more-state-1" class="read-more-button">
<span class="read-more-button-icon"></span>
</label>
</p>
This is CSS:
.read-more-state {
display: none;
}
.read-more-button {
display: none;
}
#media only screen and (max-width: 600px) {
.read-more-target {
opacity: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-button {
display: inline-block;
border-radius: 0.25em;
width: 1em;
height: 1em;
background: url(img/arrow%20grad.svg);
background-size: cover;
cursor: pointer;
}
.read-more-state:checked + .read-more-target {
opacity: 1;
font-size: inherit;
}
.read-more-state:checked ~ .read-more-button {
background: url(img/arrow%20up%20grad.svg);
background-size: cover;
cursor: pointer;
}
}
If you want the + and - icons to appear centered and below the text, your easiest option would be to make the p element positioned relative, and your icons positioned absolute.
p{
position: relative;
padding-bottom: 1.5em;
}
.read-more-button {
position: absolute;
bottom: 0px;
left: 50%;
}
Here is a codepen link.
In my search for a neat, nice and working "Read more / Read Less"-function I managed to find below code. This code works fine and can be used several times on the same page (what I really need).
This piece of code have one backslash. I need to also show/hide several images which this code will hide BUT the "Show more/less"-button will move according to the size of the image which is really not what I need.
I cannot see how to modify this code so it can hide images as well.
The problem can be seen in this JSFiddle: https://jsfiddle.net/xrtxqu94/16/
CSS
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}
HTML
<input type="checkbox" class="read-more-state" id="post-1" />
<div class="read-more-wrap">
What is Lorem Ipsum? 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 of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<span class="read-more-target">Why do we use it?
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" height="auto" width="250px" />
<p>Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</span></div>
<label for="post-1" class="read-more-trigger"></label>
CSS Solution
Thanks to Logiwan, setting the image height to 0 and auto will make the image work as the text.
.read-more-target img {
height: 0;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target img {
height: auto;
}
Complete code:
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-target img {
height: 0;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target img {
height: auto;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}
Should be able to use the same idea for the height of all images inside the .read-more-target.
Something like this:
.read-more-target img {
height: 0;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target img {
height: auto;
}
Here is an edit to your fiddle that does this: https://jsfiddle.net/xrtxqu94/20/
event if the container of the images are set to opacity:0 , the images will still occupy space in the document flow.
here is a solution, you can add the following rules :
.read-more-state ~ .read-more-wrap img {
display: none;
}
.read-more-state:checked ~ .read-more-wrap img {
display: block;
}
this will ensure that the image takes no space when the read-more state is closed
https://jsfiddle.net/xrtxqu94/26/
If you visit this link, you can see below image at the center of the page:
On this site, if you mouse over currency symbol present on top right of window, you can see drop down options, once you change a dropdown option, you can see "Usually Delivered in 3-5 business days" text next to price - I want this text below the Price, as in the next image:
This is the CSS I am using and, it doesn't matter how I try, can't get the desired result. Can someone please have an advice for me? Thank you.
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
on
.price-info
Take off
max-width: 31%;
So that it takes up the entire line
Try taking the float:left off of your p tag. That should fix a few issues on your page and might fix the issue you're having with the text displaying in the wrong area.
You should probably also add some html and css to your question. Without it it makes it a hassle to answer.
$(document).ready(function() {
$('.qty-btn').click(function(){
if($('.qty').val() > 0)
{
$('.deliveryMsg').text('Usually Delivered in 3-5 days.');
}else {
alert("Qty must be greater than 0");
}
});
});
body {
background: silver;
}
.section {
height: 400px;
width: 500px;
margin-bottom: 20px;
background: #FFFFFF;
margin-left: 100px;
padding: 10px;
}
/* used for demo purposes */
.product-img {
background: silver;
opacity: 0.5;
height: 150px;
width: 150px;
/* center the img within the col */
display: block;
margin: auto;
}
.col-left {
width: 40%;
}
.col-right {
float: right;
margin-top:-165px;
text-align: left;
width: 60%;
}
.title {
font-weight: bold;
}
.price {
margin-top: -5px;
margin-bottom: -5px;
color: blue;
}
input[type="text"] {
width: 50px;
}
span {
font-size: small;
font-weight: bold;
}
input[type="button"] {
background: orange;
color: #FFFFFF;
}
.qty {
width: 20px !important;
}
.wishlist {
width: 130px !important;
}
.deliveryMsg {
font-weight: bold;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<div class="col-left">
<div class="product-img"></div>
</div>
<div class="col-right">
<p class="title" >Golden Waves Marble Texture Apple IPhone 4 Phone Case</p>
<hr />
<ul>
<li>Device: Apple iPhone 4</li>
<li>Design: Marbles</li>
<li>Material: Polycarbonate Hard Case</li>
</ul>
<hr />
<h3 class="price">499.00</h3>
<hr />
<form>
<span>Check Delivery Availability <input type="text" placeholder="Enter PIN Code" /> <input type="button" value="CHECK" /></span>
<br /><br />
<span>Qty: <input class="qty" type="text" /> <input class="qty-btn" type="button" value="ADD TO CART" /> <input class="wishlist" type="text" placeholder="SAVE TO WISHLIST" /></span>
<br /><br />
<span class="deliveryMsg"></span>
</form>
</div>
</div>
<div class="section">
<h2>Product Description</h2>
<p>
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 of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
Hope that helps!
How to wrap one div around another? I have following two div ids:
#course {
width: 325px;
padding-right: 25px;
border-right: 1px solid #999;
border-top: 1px solid #999;
}
#home-page-sign-up {
width: 275px;
#padding-left: 25px;
float: right;
margin: auto;
#position: relative;
display: block;
clear: both;
}
I want #course to be on left and #home-page-sign-up on right just next to it. I do get block on left and right as assigned but one is below another, I want them to be side by side.
How can I achieve it?
You will want to float both of them left:
#course{
float:left;
width:325px;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}
#home-page-sign-up {
width:275px;
#padding-left:25px;
float:left;
margin: auto;
#position:relative;
display:block;
}
Just make sure #course falls first in the html
Try this:
#course{
width:325px;
float:left;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}
#home-page-sign-up {
width:275px;
#padding-left:25px;
float:left;
margin: auto;
#position:relative;
}
Then, in your body tags, do:
<div id="course">Course Div Content here...</div>
<div id="home-page-sign-up">Home Sign-up Content here...</div>
<div style="clear: left;"></div>
That's one way...that hopefully works ;)
I dont know what you mean by "wrap around" but if you want the divs to be next to each other, put float: left; in both styles...
see fiddle for code and demo
Fiddle: http://jsfiddle.net/t4LUF/3/
Demo: http://jsfiddle.net/t4LUF/3/embedded/result/
NOTE: For demo purpose i gave border to all div's you can change as per your need.
HTML:
<div id="big-container">big-container
<div id="container">
<div id="course">course 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 of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="home-page-sign-up">home-page-sign-up </div>
</div>
</div>
SS: http://img812.imageshack.us/img812/3783/divcontainersidebyside.jpg