How can I place the tooltip centered and directly under the red circle without Javascript? Thank you in advance! :-)
Here is an image of my problem and the marked position where it should be:
My code currently looks like this:
HTML code:
<li>
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
</li>
CSS code:
#ovm-oup_under ul{
text-align: center;
list-style-type: none;
padding: 0;
}
#ovm-oup_under li{
padding: 20px;
margin: 15px;
display: inline-block;
}
.ovm-oup_under_item{
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
top: 0%;
left: 50%;
z-index: 999;
}
One solution would be to combine absolute placement of the tooltip (relative to the parent div), with a translation transformation on the tooltip, which would achieve the required placement:
/* Extracted styling to top of style sheet to show the required additions */
.ovm-oup_tooltip span {
/* Offset the tooltip 50% from left side of parent (div) width
and 100% from top edge of parent height */
left: 50%;
top: 100%;
/* Pull the tooltip back 50% of it's own width, nudge the tool
tip downward 8px to account for arrow point */
transform: translate(-50%, 8px);
}
.ovm-oup_under_item {
/* Allow absolute placement of children (tooltip) */
position: relative;
}
/* Your existing styling starts here */
.ovm-oup_under_item {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
/* Remove
top: 0%;
*/
left: 50%;
z-index: 999;
}
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
The idea here is to use absolute placement of the tooltip (ie the span), to position the top-left corner of that span at the horizontal center, and bottom edge of the parent div. The transform rule is then used to offset the tooltip span relative to it's own dimensions, to achieve the final center/baseline placement.
You can merge the additions above with your existing styling - I extracted the changes to the top of the stylesheet to clarify the additons that were made to achieve the desired result. Hope that helps!
Related
I need to implement a dynamic tooltip which automatically moves itself when out of screen, as well as its arrow, depending on the position of the label. However, I am finding difficulty to do this since the tooltip's width changes depending on its content. Any help will be greatly appreciated. Thanks!
Scenario 1:
Scenario 2:
HTML:
<th *ngFor="let field of columnFields">
<a class="column-label">
<div class="custom-tooltip">
<div class="tooltip__initiator">{{field.name}}</div>
<div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div>
</div>
</a>
</th>
STYLE:
.custom-tooltip {
position: relative;
}
.tooltip__initiator {
cursor: pointer;
z-index: 5;
}
.tooltip__item {
font-family: "ABeeZee";
font-size: 13px;
line-height: 18px;
position: absolute;
position: absolute;
min-width: 132px;
max-width: 320px;
text-align: center;
padding: 12px;
visibility: hidden;
opacity: 0;
color: white;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
z-index: 6;
background: blue;
border: 1px solid blue;
border-radius: 8px;
white-space: break-spaces;
inline-size: max-content;
top: calc(70% + 1em);
}
.tooltip__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.custom-tooltip .tooltip__initiator:hover ~ .tooltip__item {
left: 50%;
visibility: visible;
opacity: 1;
}
.custom-tooltip .tooltip__item:after {
left: 50%;
top: -0.5em;
border-width: 0 1em 0.6em 1em;
border-color: transparent transparent blue transparent;
border-radius: 8px;
}
I want the image on the games button to stay on it when you hover over it, right now it disappears. I am trying not to use any HTML, only JS, and CSS. Also, the image should move with the hover effect. Thanks.
My CSS code is
#web_element {
padding-top: 8%;
text-align: center;
font-family: monospace;
font-color: #8ed4f0;
font-size: 26px;
position: fixed;
top: 5%;
left: 5%;
width: 20%;
height: 8%;
background-color: #8ed4f0;
border: 2px solid #0f99bb;
border-radius: 10px;
z-index: 1000;
transition: 400ms;
}
#games_element {
padding-top: 8%;
text-align: center;
font-family: monospace;
font-color: #8ed4f0;
font-size: 26px;
position: absolute;
top: 5%;
left: 30%;
width: 20%;
height: 8%;
background: url('https://longislandweekly.com/wp-content/uploads/2019/11/Cookie-Monster-cookie-crumbs.jpg') 38% 20%;
z-index 2000;
border: 2px solid #0f99bb;
border-radius: 10px;
z-index: 1000;
transition: 400ms;
}
#web_element:hover{
background: #fefefe;
box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3);
transform: translateY(-20px);
}
#games_element:hover{
background: #fefefe;
box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3);
transform: translateY(-20px);
}
This is the JS Code. It makes the CSS work but it's not that important.
const web_tab = document.createElement('div');
web_tab.id = 'web_element';
web_tab.textContent = 'Web Browser';
document.body.append(web_tab);
const games_tab = document.createElement('div');
games_tab.id = 'games_element';
games_tab.textContent = 'Games';
document.body.append(games_tab);
In the CSS on the style for #games_element, your overrride your "z-index: 2000; " 3 lines later with "z-index: 1000;" letting it have the same z-index as #web_element
I would like to add a tooltip inside a split screen. I have try many combination like this one, but all of them failed. My tooltip is always hidden behind the second "screen"
Here is my code so far
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow-y: auto;
overflow-x: scroll;
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
If you need to have scrolling inside the left column, your best bet is to find a way to have the tooltip exist outside the the element - not as a child, but as a sibling.
<body>
<tooltip></tooltip>
<left-column></left-column>
<right-column></right-column>
</body>
Change a-leftcolumn overflow to visible; The tooltip is hidden because of the overflow rules you set. Overflow generally hides stuff inside of the element unless you set it to visible, which is also the default btw so you can probably remove this rule entirely.
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow: visible; /* Change overflow to VISIBLE */
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}
You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>
You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>
For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}
You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);
http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/
When I click the more options a popup comes, but when I reduce the width and height if the browser using mouse... The popup does not move along with more options div...
How do I fix the issue? Please help.
My code is here: http://jsfiddle.net/rajkumart08/8p2mZ/3/
.openme {
display: inline-block;
padding: 10px;
cursor: pointer;
padding: 0;
margin: 0 20px 0 0;
width: 200px;
height: 200px;
list-style-type: none;
background: white;
border: 1px solid #999;
line-height: 200px;
padding: 0;
}
#menu{
display: inline-block;
opacity: 0;
visibility: hidden;
position: absolute;
padding:0px;
border: solid 1px #000;
margin: 0 auto 0 auto;
background: white;
top: 350px;
left: 649px;
-webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
}
#menu.show {
opacity: 1;
visibility: visible;
}
#menu a{
float:left;
/*margin: 7px;*/
padding: 10px 20px;
font-weight: bold;
font-size: 10px;
text-align: center;
background: white;
color: black;
word-wrap: normal;
/*border: 1px solid red;*/
}
One way is to specify the position of the menu in terms of % of the windows size.
E.g.
Instead of
top: 350px;
left: 649px;
specify
top: 15%;
left: 15%;
This will ensure that the menu is always positioned w.r.t the width of the window upon resize.
First, thing is give a min-width to parent container - .app-home div and make it `position:relative'.
Next, use right position instead of left for menu div.