We Keep Coding

How can I override Radix UI Tooltip.Root component

I am using the Radix UI tooltip, and I am trying to override the styling of the Tooltip.Root component.
I am able to override the other Tooltip components as seen below, but this doesn't work for Tooltip.Root:
import * as TooltipPrimitive from "#radix-ui/react-tooltip";
const StyledTooltipTrigger = styled(TooltipPrimitive.Trigger, {
display: "flex",
border: "none",
background: "transparent",
padding: 0,
textAlign: "start",
});
In short, I have a div that is inside the Tooltip.Trigger that I need to expand to width: 100%, however, the Tooltip prevents this div from expanding.

Putting text on top of image not working?

I am trying to overlay text onto the image and cannot figure out how too. This may be an easy question so if you can go into some detail on how it is done that would be much appreciated.
import React from "react";
import { Typography } from "#material-ui/core";
import topImg from "/Users/rayhewitt/Desktop/react-portfolio/src/imgs/topImg.jpeg";
import useStyles from "./HeadStyles";
const Head = () => {
const classes = useStyles();
return (
<div className={classes.top}>
<img className={classes.image} src={topImg} alt="codingPic" />
<Typography className={classes.intro} align="center">
Hey, im Ray Hewitt a UI/UX frontend developer
</Typography>
</div>
);
};
export default Head;
import { makeStyles } from "#material-ui/core";
export default makeStyles({
top: {
backgroundColor: "rgba(8,89,145,255)",
height: "5000px",
},
image: {
paddingTop: "48px",
width: "100%",
zIndex: "100",
},
intro: {
justifyContent: "center",
position: "absolute",
zIndex: "101",
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Quickly looking at your code it seems like you're almost there. I think the only thing missing is a position: relative on your parent container and a position on the text.
.top {
position: relative;
}
.text {
position: absolute;
top: 0; // or left/right/bottom
}
That should do it.
What's important to understand here is that if you position: absolute an element then it will stick to whatever parent throughout the tree is position: relative or it will stick to body if there isn't any. Marking the parent container as position: relative will have the text stick to that parent, then you can control the positioning with top/bottom/left/right.
Side note, I'm not sure it makes sense to use justify-content if the text isn't display: flex.

How to vertically and horizontally center a component in react?

How can I achieve absolute centering with CSS-in-JS? When I use the following code, my component moves across the screen. I guess the translate is being applied many times instead of just once. What's going on, and how can I fix it without using a library?
render() {
return (<ComponentASD
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}} />);
}

Another option is to use flex-box.
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
Hello world
</div>

Your example code works well:
ReactDOM.render(
<div
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
Hello, world!
</div>,
document.getElementById('root')
);
https://codepen.io/anon/pen/JaLLmX
It has to do something with your layout.

Thanks for the testing+comments! The styling ended up being fine, the issue was somehow caused by the layout of ComponentASD, which is actually MUI's CircularProgress https://material-ui.com/api/circular-progress/#demos
I wrapped that component in a div inside of render and applied the styling to the div, which fixed the problem (keeps it stationary and properly aligned).

This is flexbox you will need to use this on the parent Component.
.Parent {
display: flex,
flexFlow: row nowrap,
justifyContent: center,
alignItems: center,
{
It will center the children vertically and horizontally
You can also align each component as I've shown you below
render() {
return (<Childcomponent
style={{
display: flex,
flexFlow: row nowrap,
justifySelf: center,
alignSelf: center,
}} />);
}

If you want to have a properly scrollable list if the window's height is smaller than the content's height you want to center, you can do this (based on this CSS answer):
<div
style={{
display: "table",
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0
}}
>
<div
style={{
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
}}
>
// Here comes the content you want to center
</div>
</div>

If you want to use it in a component just call it in the component:
.Login {
text-align: center;
background-color: #2681C6;
min-height: 100vh;}
Your jsx file sould have something like just to call it, using "className":
<div className="Login"><div>

Qtip shows text at bottom of the page when hovered over

I am currently using Qtip do display text when I hover over a button. And here's my code/function that's using qtip:
$('a.helpTip').qtip({
name: 'dark',
tip: true,
position: {
corner: {
tooltip: 'topLeft',
target: 'rightBottom'
}
},
style: {
width: 400,
padding: 5,
background: '#cfdfff',
color: 'black',
textAlign: 'left',
border: {
width: 2,
radius: 4,
color: '#5271b0'
}
}
});
Whenever I hover over the help button, the text will show up at the bottom of the page for some reason like in the photo above. When I inspect the code this is what I see:
<div id="qtip-6" class="qtip qtip-default qtip-pos-tl" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-6-content" aria-hidden="true" data-qtip-id="6" style="width: 400px; z-index: 15001;"><div class="qtip-content" id="qtip-6-content" aria-atomic="true">This is my Help Text, it will be longer than it was to see what happens if it has to wrap around.</div></div>
Does anybody know how to fix this or why this is happening?

jquery BlockUI - Transparent loading image

I have a image I want to make spin as transparent when my screen is blocked. By default there is a white box as the message CSS. Not sure how to achieve this.
source: view-source:http://malsup.com/jquery/block/#demos
This section here creates a white box around the image.
$.blockUI({ message: '<h1><img src="./images/loading.gif" /></h1>'
If I comment this section of the source code out the whole image disappears.
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor: '#fff',
cursor: 'wait'
},

Try this:
css: {
backgroundColor: 'transparent',
border: '0'
},
example fiddle: https://jsfiddle.net/johnboker/ft3vwn2f/