I'm kinda new to react and I'm trying to display a tooltip on an image.
<OverlayTrigger placement="right" overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} triggerType="hover">
<img alt="" className="char-img rotate_m_5" src="/images/characters/wolf_xs.png"/>
</OverlayTrigger>
But nothing happens when the cursor hovers the image.
I have no errors just nothing happens
Edit :
I saw in Chrome DevTools that the tooltip appears in the HTML but not in the app, might be a CSS issue.
<div id="hi" role="tooltip" class="fade in tooltip top" style="top: 313.75px; left: 448.039px;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">Hello, world!</div></div>
Thanks
Here you go
class App extends React.Component {
render() {
return ( <
ReactBootstrap.OverlayTrigger placement = 'top'
delay = {
{
show: 1000
}
}
overlay = { <
ReactBootstrap.Tooltip id = "tooltip" >
This is a sample text <
/ReactBootstrap.Tooltip>
} >
<
img width = "300px"
src = "https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg" / >
<
/ReactBootstrap.OverlayTrigger>
)
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">
<div id="root" />
Need to add the CSS class "show" to the tooltip
<Tooltip id="hi" className="show">Hello World!</Tooltip>
Use this code issue solve
.popover .arrow {
background: transparent !important;
z-index: 99;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #c7c7c7;
bottom: -7px;
}
Related
I have a dynamic page with a lot of text in RTL format. TinyMCE cannot display the RTL text properly.
It shows up something like this:
While I want it to be displayed like this:
Searching for a solution, I found out that dangerouslySetInnerHtml will help me get the text clean, however, I cannot get my desired formatting for the dynamic text.
The code is as follows:
const getWelcomeText = () => {
return(
<div>
{texts.map((data, index) => (
<div className='backgroundnawishta'>
<p className='title'>
{data.title}
</p>
<p className='para' dangerouslySetInnerHTML={{__html: data.body}} />
</div>
))}
</div>
)
}
and the css styling.
.para{
font-size: clamp('1.5rem, 2vw, 5rem !important') ;
line-height: clamp('2rem, 4vw, 5rem !important') ;
font-family: titr !important;
text-align: center !important;
direction: rtl !important;
color: #112D4E;
padding: 0 !important;
margin: 0 !important;
text-shadow: 2px 2px #ffffff !important;
}
Is there a way for me to get clean text without using dangerouslySetInnerHTML or Can I override TinyMCE styling?
I'm creating a range slider and this is how it works: i've added onMouseDown event to the slider - in the function, i've attached onMouseMove and onMouseUp events to document - that's it! Simple. It works perfect on codepen.io but not locally.
I expected to see the log "down" in the console, then a lot of "move" and finally get the "up" message.
But the events showing up at the same time after release the mouse button.
console log:
Where could be the problem? How to fix if?
My project is created with create-react-app. I ran it in Google Chrome and Opera.
That's my code:
class Box extends React.Component {
downHandler = (e) => {
console.log('down');
document.addEventListener('mousemove', this.moveHandler);
document.addEventListener('mouseup', this.upHandler);
}
moveHandler = (e) => {
console.log('move');
}
upHandler = (e) => {
console.log('up');
document.removeEventListener('mousemove', this.moveHandler);
document.removeEventListener('mouseup', this.upHandler);
}
render() {
return (
<div className="container">
<div className="circle"
onMouseDown={this.downHandler}></div>
</div>
)
}
}
ReactDOM.render(<Box />, document.getElementById('root'));
.container{
width: 400px;
height: 7px;
background-color: #abc4f1;
position: relative;
margin-top: 120px;
}
.circle{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #eee;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .2);
position: absolute;
top: -7px;
left: calc(50% - 10px);
}
<div id="root"></div>
<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>
I'm trying to get a child component to render in react and it's not rendering. If I write the actual JSX composed in the child component in the parent, it renders, Why is that? The examples in the documentation show that this is possible, I don't know what I'm doing wrong.
Example here: https://jsfiddle.net/69z2wepo/309969/
class App extends React.Component {
render() {
return(
<Rectangle />
);
}
}
function Rectangle(){
return (
<div className="Rectangle">
<square />
</div>
);
}
function square(){
return (
<div className="square">
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
.Rectangle {
position: relative;
background-color: #222;
height: 760px;
width: 40px;
}
.square {
position: absolute;
background-color: green;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
}
<!Doctype>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
</body>
The end result should show a dark grey rectangle, with a 20x20 pixel green square affixed to the top left of it.
Name your components starting with a capital letter.
function Square(){
return (
<div className="square">
</div>
);
}
function Rectangle(){
return (
<div className="Rectangle">
<Square />
</div>
);
}
If you are trying to render the child component "square" then change the name square to Square and also change the function name square to Square. Component name always needs to start with Capital Letter. Otherwise it will not render.
There are 2 issues here:
Components name should start with capital letters.
In your fiddle you are using the logoutBox className but you wrote a .square css class.
class App extends React.Component {
render() {
return (
<Rectangle />
);
}
}
function Rectangle() {
return (
<div className="Rectangle">
<Square />
</div>
);
}
function Square() {
return (
<div className="square">
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.Rectangle {
position: relative;
background-color: #222;
height: 760px;
width: 40px;
}
.square {
position: absolute;
background-color: green;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />
I am trying to add a background image of a div in a component but it's not working.
{slides.map((item) => {
return (
<div key={item.id} className="item_slider"
style={{background: `url(/images/covers/${item.cover})`}}
>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
)
})}
item_slider css
.item_slider {
height: 700px;
background-size: cover !important;
background-position: center center !important;
position: relative;
font-family: 'Fjalla One', sans-serif;
}
images are in public folder though I copied them in src folder also but no luck. Can anyone help me on this?
Try with your own URL
class App extends React.Component {
constructor(props) {
super(props);
this._size = '350x150'
this._style = {
backgroundImage: `url(http://via.placeholder.com/${this._size})`
}
}
render() {
return (
<div style={this._style} className="example">
<h1>Content here</h1>
</div>
)
}
}
ReactDOM.render( < App / > , document.getElementById("root"));
.example {
background-size: cover !important;
background-position: center center !important;
position: relative;
height: 300px;
font-family: 'Fjalla One', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
So, your style should work, except with backgroundImage:
...
style={{backgroundImage: `url(/images/covers/${item.cover})`}}
...
Just make sure your paths are correct and ${item.cover} actually has a value. If it still doesn't work, might as well try and move that style from CSS into your inline style because it's the same element anyway.
Try this:
style={{backgroundImage: 'url(' + require(`/images/covers/${item.cover}`) + ')'}}
If it doesn't work, try with an image URL:
const url = "https://images.freeimages.com/images/large-previews/f2c/effi-1-1366221.jpg";
and:
style={{backgroundImage: 'url(' + require(`url`) + ')'}}
Does this work? If it does, the problem is probably with the image path.
Put the image in the same folder of the component and then try (I assume that the image name is zzz.jpg:
style={{backgroundImage: 'url(' + require(`./zzz.jpg}`) + ')'}}
If this works as well, check again the path...
I am in the process of learning React and trying a sample code from a book. The code is simple it is supposed to display vowels in different colors defined in the ReactDOM.render but instead it displays them all in one color coming from the style tag.
Attached below is the code
<!DOCTYPE html>
<html>
<head>
<meta charset-="utf-8'">
<title>Styling in React</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #FFF;
}
div div div {
padding: 10px;
margin: 10px;
background-color: #ffde00;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
class Letter extends React.Component {
render() {
var letterStyle = {
padding:10,
margin:10,
backgroundColor:this.props.bgcolor,
color:"#333",
display:"inline-block",
fontFamily:"monospace",
fontSize:32,
textAlign:"center"
};
return (
<div>
{this.props.children}
</div>
);
}
}
ReactDOM.render(
<div>
<Letter bgcolor="#58B3FF">A</Letter>
<Letter bgcolor="#FF605F">E</Letter>
<Letter bgcolor="#FFD52E">I</Letter>
<Letter bgcolor="#49DD8E">O</Letter>
<Letter bgcolor="#AE99FF">U</Letter>
</div>,
destination
);
</script>
</body>
</html>
}
It looks like you aren't using letterStyle anywhere. Try the following:
render() {
var letterStyle = {
padding:10,
margin:10,
backgroundColor:this.props.bgcolor,
color:"#333",
display:"inline-block",
fontFamily:"monospace",
fontSize:32,
textAlign:"center"
};
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
}
Try {this.props.bgcolor} you need a {} to use dynamic variables.