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;
}
}
Related
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%;
}
I'm looking to achieve a slanted edge on my div. The problem I'm coming across is the simple code I found to accomplish this is not cross-browser compatible. In fact, it only shows in Chrome.
Can anyone advise on how to do the following so it works in ALL browsers:
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
This effect would achieve:
Here's my entire CSS code:
.my-slanted-div {
position:absolute;
bottom:0;
left:0;
width:100px;
padding:10px 10px;
background-color:#eee;
font-size:20px;
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
Can anyone help me out?
You can also skew pseudo-element, like this:
.my-slanted-div {
position:absolute;
bottom:40px;
left:0;
width:80px;
padding:10px 10px;
background-color:red;
font-size:20px;
}
.my-slanted-div:after {
width:50px;
background:red;
position:absolute;
height:100%;
content:' ';
right:-22px;
top:0;
transform: skew(45deg);
}
<div class="my-slanted-div">
TEXT
</div>
p.s. change angle, play with values...to get desired result...
Edit: Demo in context -> https://jsfiddle.net/Lbwj40mg/2/
This should do the trick using borders.
<div id="container">
<p id="text">Hello</p>
<div id="slanted"></div>
</div>
#container {
position: relative;
height: 200px;
width: 200px;
background:url(http://placehold.it/200x200);
}
#text {
position: absolute;
bottom: 15px;
left: 10px;
z-index: 1;
margin: 0;
}
#slanted {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 0;
border-left: 75px solid #dedede;
border-right: 50px solid transparent;
border-bottom: 50px solid #dedede;
}
jsfiddle
I've made it work one way with :before and :after pseudos, you simply need to update the widths, heights and line-height to suit the size of tab you want; the rectangle must be the same height as the :before and :after bits for a clean look.
.box {
background: red;
width: 200px;
position: relative;
height: 100px;
line-height: 100px;
text-align: center;
margin-left: 50px;
color: white;
font-size: 21px;
font-family: arial, sans-serif;
}
.box:after {
position: absolute;
right: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.box:before {
position: absolute;
left: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="box">
Text in the box
</div>
Here's a way with transform: rotate just to add to the list. Quite annoying as you will have to play with pixels for alignment and make some entries into #media rules for different screen sizes. But it should be fairly cross browser friendly (but maybe not opera mini)
body {
background-color: #333;
}
.container {
position: absolute; /* needs a position, relative is fine. abolsute just for this example */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #ccc;
overflow: hidden; /* required */
}
.salutations {
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 0 15px;
background-color: #fcfcfc;
height: 50px;
line-height: 50px; /* match height to vertically center text */
font-size: 30px;
}
.salutations::before {
content: '';
position: absolute;
top: 21px; /* play with this for alignment */
right: -36px; /* play with this for alignment */
height: 40px; width: 70px; /* may need to adjust these depending on container size */
background-color: #fcfcfc;
transform: rotate(60deg); /* to adjust angle */
z-index: -1; /* puts the pseudo element ::before below .salutations */
}
<div class="container">
<div class="salutations">Hello</div>
</div>
P.S. May have to adjust a pixel or two, my eyes suck.
Browser Compatability
transform: rotate
pseudo elements (::before)
Fiddle
https://jsfiddle.net/Hastig/wy5bjxg3/
It is most likely it is an SVG scaled to always fit its text which is simple and quick way of doing it; if you must use CSS then you could always:
Set a gradient to the div from color to transparent so that it takes up most of the div and the transition of color is abrupt and not smooth like how a normal gradient looks.
create another div and using borders create a triangle to touch the other main rectangular div such as doing:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;
}
Using css you can generate an element that takes the shape of a triangle.
Css tricks has a post on that.
By making the .slanted class position itself relative, we can position the generated content on the right side of the slanted div using absolute positioning.
It'll take some fiddling to get the perfect result you want, but here's an example.
.slanted{
background: #007bff;
color: #fff;
position: relative;
display:inline-block;
font-size: 20px;
height: 25px;
padding: 2px 4px;
}
.slanted::after {
content: " ";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 29px 0 0 20px;
border-color: transparent transparent transparent #007bff;
position: absolute;
top: 0;
right: -20px;
}
<div class="slanted">Hello</div>
The CSS for the popup text (French) is:
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 360px;
background-color: #668A04 !important;
color: #fff;
text-align: left;
/* border-radius: 6px; */
padding: .5px 0;
position: absolute;
z-index: 1;
bottom: -67%;
left: -271%;
margin-left: -80px;
}
My task is to shift the popup text little bit towards the bottom which
is little upwards as shown in the image.
I tried changing the position of a popup text by using the text-align property but unfortunately I am unable to move towards the bottom.
text-align: center;
text-align: left;
text-align: right;
The CSS for the image(as shown above) before the popup text is:
.label-mobile-languageselector .popuptext:before {
content:url('img/globe.png');
display:inline-block;
float:left;
width: 30px; /* whatever width you need */
height: 29px; /* whatever height you need */
margin-right: 0.5em; /* whatever margin is needed to separate the image from the text */
}
Here is the fiddle ( At this moment the popup not working not sure why )
Excerpt from my Fiddle:
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 360px;
background-color: #668A04 !important;
color: #fff;
text-align: left;
padding: 15px 0 0;
/* Added padding, adjust to your needs */
position: absolute;
z-index: 1;
/*height: 29px !important;*/
/* height removed */
/*bottom: -67%;*/
/* bottom removed */
left: -271%;
top: 48px;
/* top added */
margin-left: -80px;
}
.label-mobile-languageselector .popuptext::after {
content: "";
position: absolute;
top: -16px;
/* top changed to the arrow height */
left: 58.2%;
margin-left: -5px;
border-width: 8px;
border-style: solid;
border-color: #668A04 transparent transparent transparent;
transform: rotateX(180deg);
}
I am trying to achieve something as close to the image below as possible.
I currently get the following with the code below and can't seem to quite get it to do what I need.
Current Styling:
My CSS:
hr:after {
background: url('../img/green_leaf.png') no-repeat top center;
content: "";
display: block;
height: 18px; /* height of the ornament */
position: relative;
top: -9px; /* half the height of the ornament */
border: 0;
color: #d7d7d7;
}
I Would like to thicken the line, and if possible, add space around the image (without making the green_leaf.png have a white bg).
How about setting the image in the hr element, and using :before and :after to create the lines? That way you won't have to set a background on the image to cover up a single line.
Working Example:
hr {
background: url('http://i.stack.imgur.com/37Aip.png') no-repeat top center;
background-size: contain;
display: block;
height: 18px;
border: 0;
position: relative;
}
hr:before,
hr:after {
content: '';
display: block;
position: absolute;
background: #d7d7d7;
height: 2px;
top: 8px;
}
hr:before {
left: 0;
right: 50%;
margin-right: 10px;
}
hr:after {
right: 0;
left: 50%;
margin-left: 10px;
}
<hr />
You can find the answer in this post Custom <hr> with image/character in the center
I modified it and I got this:
hr {
no-repeat top center;
text-align: center; /* horizontal centering */
line-height: 1px; /* vertical centering */
height: 1px; /* gap between the lines */
border-width: 1px 0; /* top and bottom borders */
border-style: solid;
border-color: #676767;
}
hr:after {
content: ""; /* section sign */
background: url('smiley.gif') no-repeat top center;
display: inline; /* for vertical centering and background knockout */
background-color: white; /* same as background color */
padding: 0 2em; /* size of background color knockout */
}
Pay attention to padding: 0 2em; and background-color: white;.
If you set it up like this, and specify background color on the image to match whatever you have in the background of the page (probably white) it will look good:
HTML
<div class='hr'>
<hr>
<img src='../img/green_leaf.png' alt=''>
</div>
CSS
hr {
border:none;
border: 1px solid #d7d7d7;
}
.hr {
text-align: center;
}
.hr img {
position: relative;
top: -18px;
background:white;
padding:0 5px;
}
Result:
Fiddle
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height