How to add hover css style with React.createElement - javascript

I'm creating a button with React.createElement:
React.createElement('button', {style: button.key === this.state.customBtnSelected ? customBtnSelected : customBtnUnSelected, onClick: () => {this.handleCustomBtnClick(i)} }, button.label)
So the one of the css styles is in the customBtnUnSelected variable.
But how do I add css classes for the hover state?
So far this isn't working:
const customBtnUnSelected = {
padding: 12,
textAlign: "center",
textDecoration: "none",
display: "inline-block",
fontSize: 12,
cursor: "pointer",
backgroundColor: "#CFD4DA",
border: "1px solid white",
&:hover: {
color: "#fff"
}
};

It's not possible to use the :hover, :after, or :before styling to an element, using inline styling.
The only way to achieve that is to use the <style> tag, or linking an external CSS file to your project.
To insert a style tag, you just place it somewhere in your app. It may be in one of your components, or in the root HTMl file, etc...
return (
<style>{`
.myButton {
padding: 8;
background: black
}
.myButton:hover {
background: grey
}
`}</style>
)
Then, you can just use the myButton class on the className prop of your button.
<button className='myButton'>Click</button>
or
React.createElement('button', {className: 'myButton'})

Regardless of using React.createElement or the JSX syntax, React doesn't support selecting pseudo elements with inline styling.
This question has a few answers with a lot more tips that might help you:
CSS pseudo elements in React

Related

Convert from css to makestyle material UI

I want to add an iconButton and display a website preview when the mouse hover the help icon. I found something similar using css but I need to convert that to material UI.
This is the css code to be converted from this post How to show live preview in a small popup of linked page on mouse over on link?
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}
This is what I have so far:
const HoverText = () => {
return (
<div className={classes.box}>
<iframe src="https://en.wikipedia.org/" width="500px" height="500px">
</iframe>
</div>
);
};
return (
<>
<IconButton size="large" color="inherit" onClick={() => window.open("https://en.wikipedia.org/", "_blank")}>
<HelpIcon className={classes.act} />
<HoverText />
</IconButton>
</>
);
Could you please help me to fix this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
box: {
width: '100%',
display: 'none'
},
act: {
"&:hover + .box, .box:hover": {
display: 'block',
position: 'relative',
zIndex: 100
}
}
}),
);
Im expect to display a preview of a website page when mouse is over the icon.
You have to use the $ character when referencing another rule name. I changed a code a bit, use classes.act on IconButton (the hover effect will be better), and use the following:
const useStyles = makeStyles(() =>
createStyles({
box: {
width: 0,
height: 0,
display: "none"
},
act: {
"&:hover $box": {
display: "block",
zIndex: 100
}
}
})
);
Use $box instead of .box.
There is no box class generated when you compile your code (You can inspect your code and see what it compiles to). So the .box class selector does not work because there is no box class.
You should use $ to select another local rule or class within the same stylesheet. Read more.
"&:hover + $box, $box:hover"

Change color of glyph icon

The standard glyph icons are pretty boring
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
The following code works, but instead of a filled in star with black, is there a way to make it some other color, e.g., orange?
In addition, is there a more interesting set of icons for download to use for buttons?
const glyphStarEmpty = 'glyphicon glyphicon-star-empty';
const glyphStarFull = 'glyphicon glyphicon-star';
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
currentGlyph: glyphStarEmpty
};
this.toggleChecked = this.toggleChecked.bind(this);
}
toggleChecked() {
if(this.state.currentGlyph == glyphStarEmpty){
this.setState({
currentGlyph : glyphStarFull
})
}
else{
this.setState({
currentGlyph : glyphStarEmpty
})
}
this.setState({
checked: !this.state.checked
});
}
render() {
return (
<button className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
);
}
}
You can do that with simple css
<span class="icon-some"></span>
.icon-some {
color: orange;
}
Wow, why so complicated? Just add some CSS inside the <head> tag:
<style type="text/css">
.glyphicon { color: orange; }
</style>
Another icons that you can use are from font awesome.They have tons of button icons and i'm sure you'll like it,i've used this icons for a lot of websites,to change the colors simply ad some css as other members told you before me
You could use an inline style:
<button style={{ color: 'orange' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
If you want a black outline in addition, try this:
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
You could add a css color property like this:
HTML
<span class="orange glyphicon glyphicon-envelope"></span>
CSS
.orange {color: orange;}
With the help from surrounding answers, the solution became obvious. This is not perfect since I want a black border with a pure white inside (or maybe even the way stackoverflow color scheme using gray for the up/down triangles) for unchecked state for maximum contrast, but I will fix that on my own:
render() {
if(!this.state.checked)
{
return (
<button className={glyphStarFull} onClick={this.toggleChecked}></button>
);
}
else
{
return (
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>

How to set default font family and size in draft.js

I am learning draft.js editor and can't find how to configure default font-family and font size.
I tried this way:
let editorState = EditorState.createEmpty();
let newState = RichUtils.toggleBlockType(
editorState,
'aligncenter'
);
newState = RichUtils.toggleInlineStyle(
newState,
'FONT_SIZE_36'
);
newState = RichUtils.toggleInlineStyle(
newState,
'TIMES_NEW_ROMAN'
);
What is weird, aligncenter style works fine, but font size and family disappears when component gets focus.
Can you please suggest correct way how to do it?
Using RichUtils.toggleInlineStyle() is for modifying the currently selected range of text (or setting the inline style for text that will be entered at the current cursor position). There is not a way to use this to set the default inline styles for the entire document (nor is this recommended).
To get default styles, you should use CSS and set the styles you want for the entire editor. Then you should override those styles for specific text ranges using toggleInlineStyle when the user wants a non-default style (for instance selecting font-size from a dropdown).
Here's the catch. Currently you can pre-define these inline styles using styleMap but you can't really create them on-the-fly as a user chooses an arbitrary font-family (or size or color).
I have been struggling with this also while trying to implement a color-picker for react-rte.org.
(Technically, you can add styles on the fly, but it won't trigger a re-render, so that's not really usable.)
There is an open issue for this here:
https://github.com/facebook/draft-js/issues/52
I expect this will be resolved within a week or so and I can edit this answer with example code to accomplish what you're after.
if your trying to set the default font size in draft.js Editor just set up your component like this below
notice the div that is wrapped around the Editor, EmojiSuggestions, and mentionSuggestion components. Just set the className for the editor to your font size. in my case it is fs-1. Note I have added an editorStyles.editor class that is coming from an attached scss file. This contains some scss for the editor.
Here is what the scss looks like, no need to add this though if you are just trying to edit the default font style
Just showing this, but not needed to set default font size. That is done in div wrapper
.editor {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
margin-bottom: 9px;
box-shadow: inset 0px 1px 8px -3px #ABABAB;
background: #fefefe;
}
.editor :global(.public-DraftEditor-content) {
min-height: 140px;
}
.mention {
color: #2c7be5
}
<div
style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
className={`border border-2x border-300 bg-light rounded-soft fs-1 ${editorStyles.editor}` }
onClick={() => { messageFieldRef.current.focus(); }}
>
<Editor
editorKey={'editor'}
currentContent={ContentState}
editorState={tempEditorState ? tempEditorState : editorState}
onChange={setEditorState}
plugins={plugins}
ref={messageFieldRef}
/>
<EmojiSuggestions />
<MentionSuggestions
open={open}
onOpenChange={onOpenChange}
suggestions={suggestions}
onSearchChange={onSearchChange}
onAddMention={(e) => {// get the mention object selected
}}
entryComponent={Entry}
/>
</div>
<div>
<EmojiSelect closeOnEmojiSelect />
<span color="light" className="px-3 py-1 bg-soft-info rounded-capsule shadow-none fs--1 ml-3" >
<FontAwesomeIcon icon="tags" transform="left-3"/>
Press <strong>#</strong> while typing to insert custom fields
</span>
</div>

tooltip div with ReactJS

objective
I have a div that I want to make act like a tooltip with reactjs.
HTML
<div>on hover here we will show the tooltip</div>
<div>
<div class="tooltip_custom">this is the tooltip!!</div>
</div>
I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?
Thanks
You can make your component to return the following markup
return (
<div>
<div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
<div>
<div style={tooltipStyle}>this is the tooltip!!</div>
</div>
</div>
);
Where tooltipStyle is assigned like this:
const tooltipStyle = {
display: this.state.hover ? 'block' : 'none'
}
So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.
handleMouseIn() {
this.setState({ hover: true })
}
handleMouseOut() {
this.setState({ hover: false })
}
Here is working example.
You can start diving in React with this article: Thinking in React.
One option is just to do it in CSS. It's not quite as flexible, but with markup like:
<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>
You could do:
.tooltip {
...
visibility: hidden; /* Or display: none, depending on how you want it to behave */
}
.tooltip-on-hover:hover + .tooltip { /* Uses the adjacent sibling selector */
visibility: visible; /* Or display: block */
}
Example:
.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }
<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>
You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::before or ::after pseudo-element, there are guides around on how to do this.
I think whatever you want to show as tooltip, just add that to the "title" of the div where you want to show it.
Eg:
<div title="I am the tooltip text">I am the div where you should hover</div>
But if its a custom designed div then go as the answers given before.
Install npm package:
npm install react-tooltip
Usage:
import ReactTooltip from "react-tooltip";
<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />
You can also use React Mapple ToolTip which is easy to use and customize and also comes with predefined themes.
Disclaimer: I am the author of this library
reactjs-mappletooltip
You can use react-tooltip package. Super easy to use and handy also.
Installation: npm i react-tootip.
Example:
1. import it :
import ReactTooltip from "react-tooltip"
Include it in your component:
<div className="createContent">
**<ReactTooltip />**
<div className="contentPlaceholder">
add tool tip to your button/div or any element: data-tip="add tooltip message"
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
package url: https://www.npmjs.com/package/react-tooltip
import Tooltip from "#material-ui/core/Tooltip";
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'rgba(255,250,228)',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 400,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
headerName: 'FEEDBACK',
field: "remarks",
flex: 0.30,
renderCell: (params: GridCellParams) => (
<Grid>
<HtmlTooltip title={params.value} placement="bottom">
<Typography style={{ color: "inherit", cursor: "pointer" }}>{params.value}</Typography>
</HtmlTooltip>
</Grid>
)
In case, if you are using react-bootstrap in your project, then use https://react-bootstrap.github.io/components/overlays/ Overlay with the tooltip.
MouseEnter and MoverLeave need to be used though.
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<div>on hover here we will show the tooltip</div>
</OverlayTrigger>

Bootstrap tooltip CSS changes work in file but not with jQuery

I'm trying to customize the look of the .tooltip-inner class (from Twitter Bootstrap) and it's working fine when I add it to my CSS file (which overrides Bootstrap.css):
.tooltip-inner {
color: #333;
background-color: #fff;
border: 1px solid #333;
}
Here is where tooltip is used:
<img id="notebookIcon" src="notebook.png" data-placement="bottom" data-toggle="tooltip" title="Apps" />
But when I try this:
$(function(){
//$('#notebookIcon').tooltip(); Uncommenting this doesn't fix
$('.tooltip-inner').css('background-color','#fff');
$('.tooltip-inner').css('color','#333');
$('.tooltip-inner').css({"border-color": '#333',"border-width":"1px","border-style":"solid"});
});
Changes do not appear.
Side Note: The actual class of the tooltip that appears is class="tooltip fade bottom in" (this is observed using Firebug at runtime) but modifying .tooltip-inner CSS seems to work.
The Twitter Bootstrap library adds and removes the tooltip elements when the hover occurs. Even after initializing the tooltips with .tooltip(), no HTML is added to the page...so your immediate calling of .css() on the $(".tooltip-inner") matches no elements. When you hover over the target, Bootstrap adds a <div class="tooltip"> element immediately after the target. When you leave the target, that new element is removed.
CSS is always there and ready to be applied to elements, so it's always applied when the element is added on hover.
The solution would be to bind the mouseenter event to the target and apply the styles then:
$(function () {
$('#notebookIcon').tooltip().on("mouseenter", function () {
var $this = $(this),
tooltip = $this.next(".tooltip");
tooltip.find(".tooltip-inner").css({
backgroundColor: "#fff",
color: "#333",
borderColor: "#333",
borderWidth: "1px",
borderStyle: "solid"
});
});
});
DEMO: http://jsfiddle.net/uDF4N/

Categories