I have to show tool tip on hover of an image which is inside scroll, because of which the content is not visible if I change the width it is hiding other seat images, what should be the way to achieve this
<div class="plane-body" class="plane-seat valid-seat tooltip" >
<div class="plane-seat invalid-seat available tooltip" *ngIf="!seat.validSeat">
<span class="showpaxname invalid-seat-tooltip">{{
'seatmap.unavailableSeatError.blockedSeat' | translate}}</span>
</div>
.plane-body {
margin: 3em;
padding: 2em;
overflow-y: auto;
height: 70vh;
overflow-x: hidden;
min-height: 500px;
}
.tooltip .showpaxname::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: wheat transparent transparent transparent;
}
.tooltip:hover .showpaxname {
visibility: visible;
}
Try to use left tooltip instead.
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Related
I would like to integrate the W3-Tooltip in my project. It works fine on normal screens, but fails on mobile phones. The example is here: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_left
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
When making the screen smaller, the tooltip will stay where it is and a scroll bar will appear.
I would like to have a css-solution, where the tooltip will be positioned differently on small screens. My idea is to have
left and width: relative to screen
top: relative to parent object (the underlined keyword)
Then the tooltip could fill the screen from left to right border but stay under the keyword.
Does anyone have an idea how to solve this positioning issue? I would prefer a solution without javascript, but if it is not possible without, then it would also be OK.
Use a media query to position the tooltip differently on a smaller screen:
#media only screen and (max-width: 600px) { /* adjust max-width for the screen-size you want */
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
margin-top: 10px; /* adjust this if needed */
}
.tooltip .tooltiptext::after {
top: 0%;
left: 50%;
margin-top: -9px;
margin-left: -5px;
border-width: 5px;
border-color: transparent transparent black transparent;
}
}
I've got a problem with border-radius on wrapper that contains an overflow hidden.
I use a before pseudo element (pink background) to fill the wrapper's background. The wrapper has already a background (blue).
#wrapper {
background: blue;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
With this example, we can see an unwanted blue pixel on the top and bottom left corner.
The pseudo element must be in position absolute to apply animation. I removed the animation for the example.
How can I fix this?
A fix is here. Apply overflow:hidden an width:300px to the outer div #container.
#container {
width: 300px;
overflow: hidden;
border-radius: 12px;
}
#wrapper {
height: 90px;
background: blue;
border-radius: 12px;
position: relative;
box-sizing: border-box;
border: 2px solid pink;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
right: -30px;
position: absolute;
top: 0;
width: 30px;
border-radius: 50%;
transition: transform 0.3s;
}
#wrapper:hover::before {
transform: scale3D(10, 10, 1);
}
<div id="container">
<div id="wrapper"></div>
</div>
You found a really interesting rendering issue. My idea to solve it, is switch the colors and logic a little:
#wrapper {
background: pink;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: blue;
content: '';
display: block;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
Here's example https://jsbin.com/rekaxa/edit?html,css,output.
I'd like to put that red circle(an icon) over the image, but to keep html straightforward. What's the best way(maybe totally different) to implement it?
You haven't said where you want the icon to be so I picked the dead center of the div.
div {
background-color: green;
width: 280px;
height: 180px;
position: relative;
}
img {
margin: 0 auto;
display: block;
}
div:after {
content: '';
position: absolute;
top: 50%; /* adjust as requiured */
left: 50%; /* adjust as required */
margin-top: -15px;
margin-left: -15px;
width: 30px;
height: 30px;
background: red;
display: block;
border-radius: 15px;
}
<div class="icon">
<img src="http://dummyimage.com/200x150/000/fff" />
</div>
I'm trying to make a link image.
everything works with link but when I add a 2nd image to show when hover - then a strange border shows around it. Any ideas how to avoid the border?
I cant add a pics here so look here:
http://postimg.org/image/7q0jkc99t/
in html:
<div id="Oobj14">
<a href="formularz.html"><img id="Ggeo9" class="przed" onmouseover="this.className='po'"
onmouseout="this.className='przed'" alt=""></div>
in css:
.przed{
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
.po{
background: url('image/dolacz2.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
and for the image:
#Oobj14 {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
}
img#Ggeo9 {
width: 100%;
height: 100%;
opacity:1.0;
Why use javascript at all? I'd throw away the images and simply use backgrounds. Use CSS :hover to switch to another background
HTML:
<div id="Oobj14">
Descriptive text
</div>
CSS:
#Oobj14 a {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
overflow:hidden;
text-indent:-2000px;
}
#Oobj14 a {
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
#Oobj14 a:hover {
background: url('image/dolacz2.png') no-repeat;
}
I was looking at a post here and noticed that the snapshots have a side label bar and a botton horizontal bar for labeling contents.
How can this be achieved using CSS?
Update: I am talking about the cross-bar in the first image that says "snapshot" and "WP Advanced Code Editor"!
Try this - http://jsfiddle.net/hEeZA/
HTML
<div class="container">
<span class="diag"> Some text </span>
<span class="horiz"> Some text </span>
</div>
CSS
div {
height: 300px;
width: 400px;
background: beige;
overflow: hidden;
position: relative;
}
span {
width: 200px;
display: inline-block;
height: 30px;
line-height: 30px;
color: #fff;
background: orange;
text-align: center;
position: absolute;
}
.horiz {
bottom: 40px;
}
.diag {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
right: -50px;
top: 30px
}
My demo can be seen here http://dabblet.com/gist/3152262
I have an image wrapper with overflow:hidden and I've simply used a :before pseudo-element which I've rotated and absolutely positioned. Same idea for the horizontal one.
HTML
<a href="#" class="img-wrapper">
<img src="img.jpg">
</a>
CSS
.img-wrapper {
width: 400px;
height: 300px;
box-shadow: 1px 1px 3px #000;
display: block;
overflow: hidden;
position: relative;
}
.img-wrapper:before, .img-wrapper:after {
padding: .3em 2.9em;
position: absolute;
background: blue;
color: white;
font: 700 14px sans-serif;
}
.img-wrapper:before {
top: 35px;
right: -40px;
transform: rotate(45deg);
content: 'Screenshot';
}
.img-wrapper:after {
top: 85%;
content: 'Developer Formatter'
}