Keep tooltip within parent container? - javascript

I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)

Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

Related

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

How can I put this make this box go below the text like in the image

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>
Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/
You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}

How to make a simple HTML CSS Time diagram

I am trying to create a time diagram which displays lab usage time using HTML CSS divs. I put something together, but it is not turning out as well as I thought.
div {
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 70%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.bringUp {
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
Actual Time Used
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
What I am trying to achieve is creating a block of "actual" time which is made up of several blocks in line (Bringup, idle, lost, used). I also need to create another block which can move inside or outside of the actual time block to represent allotted time. The behavior is very similar to a stack bar chart, but not quite the same. The widths are hard coded in the CSS above, but the idea is the values would be based upon user input.
Any advice to achieve this would be great!
You could do it like that:
Set margins that are inherited from the parent to 0
Set heights manually is the easiest way in this case
Place "Actual Time Used" in a absolute positioned span
div {
box-sizing: border-box;
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 100%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.actual span {
position: absolute;
bottom: 20px;
right: 50%;
}
.bringUp {
margin: 0;
height: 58px;
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
margin: 0;
height: 58px;
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
margin: 0;
height: 58px;
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
margin: 0;
height: 58px;
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
<span>Actual Time Used</span>
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>

Dropdown menu javascript function

I have a dropdown menu. It consists of 3 buttons ontop of eachother so only the main button is visible. When you hover over the main button saying Raffles it will make the button move upwards. Then 1 of the other 3 buttons moves down and the last one stays still. This creates a compact dropdown menu. It works perfectly except for 1 problem. I have it set to that when you hover each one it will shift them into the positions the need to be. The problem is that when I start to hover over a different button (after they have shifted) they all start to shift again because I stop hovering over 1 button and start hovering over the next button. How can I prevent this from happening?
var dropdown = function() {
$('.inbutton, .dr1button, dr2button').hover(function() {
$('.inbutton').animate({
top: '-183px'
}, 200);
$('.dr2button').animate({
top: '0px'
}, 200);
}, function() {
$('.inbutton').animate({
top: '-122px'
}, 200);
$('.dr2button').animate({
top: '-61px'
}, 200);
});
};
$(document).ready(dropdown);
p.button {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.button:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.dbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
vertical-align: middle;
line-height: 30.5px;
text-align: center;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.dbutton:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.inbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
position: relative;
top: -122px;
z-index: 98;
}
p.inbutton:hover {
border-bottom: 0px;
cursor: pointer;
}
p.dr1button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
z-index: 97;
transition: background-color 0.2s ease;
}
p.dr1button:hover {
background-color: #585858;
cursor: pointer;
}
p.dr2button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
top: -61px;
z-index: 98;
transition: background-color 0.2s ease;
}
p.dr2button:hover {
background-color: #585858;
cursor: pointer;
}
div.navbardivider {
height: 61px;
width: 1px;
background-color: #424242;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
float: left;
}
div.dropdown {
width: 144px;
float: left;
}
div.divider:hover {
cursor: pointer;
<div id="buttons">
<!--Home button-->
<p class="button">- Home</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Raffles Button-->
<div class="dropdown">
<a href="/raffles.php">
<p class="dr1button">Open</p>
</a>
<a href="/clraffles.php">
<p class="dr2button">Closed</p>
</a>
<p class="inbutton">Raffles</p>
</div>
<!--Divider-->
<div class="navbardivider"></div>
<!--Get tokens Button-->
<p class="dbutton">Get<br>Tokens</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Token lotto Button-->
<p class="dbutton">Token<br>Lotto</p>
</div>
Your problem is here:
$('.inbutton, .dr1button, dr2button').hover
You have a couple of problems. By triggering on the button individually you mouse out of one, before mousing over the other. It triggers the close before the reopen. This causes the bouncing effect. Also you are missing the "." in front of dr2button so it's not triggering the hover effect at all.
I'd use the wrapper instead:
$('.dropdown').hover
This way once you mouse over the dropdown it stays open until you mouse out. check out this fiddle: http://jsfiddle.net/r5Lyga84/

Gap above carousel

I hate to clutter up Stack Overflow, but I can't seem to update my original question here - Issue with div floating on top of carousel. The JSFiddle was incorrect.
I'm having some trouble with this:
http://jsfiddle.net/myoozik/U6bV8/
If you take a look at above the carousel, there is a giant gap. This comes as a result of adding the black overlay div on top of the carousel.
Any idea on how to get rid of that gap aka how is it being generated?
HTML
<div class="carousel-wrapper">
<div id="overlay-div">
</div>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="/_shared/img/img1.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img2.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img3.jpg" width="850" height="500" alt="">
</li>
</ul>
</div> ‹›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#overlay-div {
background-color: #000;
width: 200px;
height: 200px;
position: relative;
left: 100px;
top: 300px;
z-index: 999;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
overflow: hidden;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
/*border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;*/
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
The black color box is appearing due to #overlay-div Div that is present which has some height, width and background color. if you set display:none to it the space and black box will disappear.
below is the CSS
#overlay-div {
background-color: #000000;
display: none;
height: 200px;
left: 100px;
position: relative;
top: 300px;
width: 200px;
z-index: 999;
}
Fiddle here here.
Is this what you are looking at?

Categories