Is it possible to show some custom HTML markup in react bootstrap tooltip component
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={
<Tooltip id='Description__tooltip'>
{record.desc}
</Tooltip>
}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>
The value displayed in the tooltip (record.desc) is having some html code which I want to add to this tooltip.
Can you try with dangerouslySetInnerHTML?
<Tooltip id='Description__tooltip'>
<div dangerouslySetInnerHTML={{ __html: record.desc}} />
</Tooltip>
you can try with dangerouslySetInnerHTML
const tooltip = (
<Tooltip id="Description__tooltip">
<div dangerouslySetInnerHTML={{ __html: record.desc}} />
</Tooltip>
);
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={tooltip}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>
from in your problem, if you want to insert DOM Element in children, we must do function to wrapper the props which DOM element contains. we can use dangerouslySetInnerHTML. example code like this below.
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={
<Tooltip id='Description__tooltip'>
<div dangerouslySetInnerHTML={{__html:record.desc}} />
</Tooltip>
}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>
Related
hey I am building an spa app with vuejs 3 and I am stuck with v-if and v-else not working as intended
<div v-if="this.isScroll" #click = "toggleIsScroll" class ="spinner-container ">
<i ref = "icon" class = "bi bi-pause-fill icon"> </i>
<div ref="spinner" class ="spinner-border text-dark loader "> </div>
</div>
<div v-else #click = "toggleIsScroll" class ="spinner-container ">
<i ref = "icon" class = "bi bi-play-fill icon"> </i>
<div ref="spinner" class ="spinner-border text-dark loader visually-hidden"> </div>
</div>
the docs says that v-else needs to come right after v-if but I don't know if it works if v-if has children inside it
i have tried to create the v-if section and v-else section in separate components and use v-if and v-else on those as follows
<CustomComponent v-if="this.IsScroll"/>
<SecondCustomComponent v-else/>
but it just renders both components always so how should I go about this?
can you use v-else on followed v-if element even if the v-if one has child elements before the v-else?
When it comes to displaying components conditionally, it would be best to go with v-show since it won't re-render every time when you make it hide/show
<CustomComponent v-show="this.IsScroll"/>
<SecondCustomComponent v-show="!this.IsScroll"/>
v-if and v-else should work with children inside the element. Also you don't need to do v-if="this.isScroll" but just v-if="isScroll".
Assuming that IsScroll is set in the data, the this is not required.
Use v-show if you need to toggle something often, and use v-if if the condition is unlikely to change at runtime.
data: {
IsScroll: true
},
methods:{
toggleIsScroll(){
.....
}
}
<div v-if="isScroll" #click= "toggleIsScroll" class ="spinner-container ">
<i ref = "icon" class = "bi bi-pause-fill icon"> </i>
<div ref="spinner" class ="spinner-border text-dark loader "> </div>
</div>
<div v-else #click= "toggleIsScroll" class ="spinner-container ">
<i ref = "icon" class = "bi bi-play-fill icon"> </i>
<div ref="spinner" class ="spinner-border text-dark loader visually-hidden"> </div>
</div>
RenderByTenantFunc({
wp: () => (
<Tooltip id="tooltip-fab" title="Home">
<Button className="home-button">
<a
href={
GAIN_ENV.toLowerCase() === 'staging'
? 'link1'
: 'link2'
}
rel="noopener noreferrer"
>
<div aria-label={translate('home')}>
<img
className="icon"
style={{
width: '22px',
height: '20px',
marginBottom: '-10px',
}}
src={SourceWpIcon}
alt={translate('home')}
/>
<span className="home-button-text">Home</span>
</div>
</a>
</Button>
</Tooltip>
),
})
If you are clicking on the Home button a new browser tab opens. This is very confusing to customers as they think they're being taken somewhere else. It should direct to the navigation selection in the same browser tab. I tried by removing target="_blank", but still navigating to a new browser, I was stuck here, please help me, guys.
the default value of target is _blank try with changing it to _self
I try to fix button location when image is added.
I want the button location to be always horizontal.
front : React
css framework : semantic-ui-react
render() {
return (
<Container text style={{marginTop: '3em'}}>
<Header as="h1">{this.state.article.title}</Header>
<this.Paragraph />
{(this.state.article.imageNames || []).map(function(articleData, i) {
return (
<img
src={`https://article-s3-jpskgc.s3-ap-northeast-1.amazonaws.com/media/${
articleData.name
}`}
alt="new"
/>
);
})}
{/* TODO fix button location when image exists */}
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
{this.renderRedirect()}
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
);
}
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx
At particular image size, button location is like this:
I want the button location to be always horizontal like this:
I expect the button location is always horizontal.
But the actual is not always according to image size.
As #Arup suggested, This issue is resolved by flexbox.
<Container style={{display: 'flex'}}>
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
i have a django template that uses for loop to print comments i want to show the input field and a button when the edit link is clicked how do i do that.
and also when the edit button is pressed i wanna get the value from that specific input field. how do i do that?
{% for comment in comments %}
<div class="comment mdl-color-text--grey-700">
<header class="comment__header">
<img src="images/co1.jpg" class="comment__avatar">
<div class="comment__author">
<strong>{{comment.User_name}}</strong>
<span>{{comment.date}}</span>
</div>
</header>
<div class="comment__text">
{{comment.text}}
</div>
<!-- FAB button , class "mdl-button--fab"-->
<a href="javascript:delete_comment('{{comment.text}}','{{comment.blogslug}}')">
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">delete</i>
</button>
</a>
<!--when this link is clicked bellow edit_comment div should appear -->
<a href="">
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">edit</i>
</button>
</a>
<!-- and also when i click the edit button how can i get value from the input -->
<div id="edit_comment" style="visibility: hidden;">
<input type="text" name="edit_comment">
<button>edit</button>
</div>
</div>
{% endfor %}
so the problem is there are going to many other comments of this type because they are printed using a loop.
Firstly, why are you wrapping your button in an <a> tag? Unnecessary.
Get rid of visibility: hidden. Use display: none or a class like Bootstrap's d-none.
I suggest d-none because it allows you to add the class and remove it without worrying about the inherited display property, i.e. display: flex or display: block.
https://getbootstrap.com/docs/4.0/utilities/display/
Write a custom function with an event listener.
Inside your template loop:
<button class="mdl-button mdl-js-button mdl-button--fab" onclick="handleClick(this)">
<i class="material-icons">edit</i>
</button>
ASSUMING YOU HAVE REMOVED THE <a> TAG
JavaScript:
let handleClick = function(param) {
let editCommentDiv = param.parentNode.lastChild;
editCommentDiv.style.display = "none"
};
This is by no means the best way to do it. I highly suggest you use BootStrap's d-none class. Also, what you should actually do is assign an ID based on the for loop to both the button and to the div, i.e. id=editcommentdiv_{{ forloop.counter }} this way you won't need to use DOM to navigate to the last element to get the edit div, and can just target the div directly via ID.
I'm having troubles with creating a simple gallery allowing to print pictures. I constructed the interface. When I click on the print button, I'm not able to propagate event to a function. Funny enough, it always works for just a couple of items in the gallery so that console logs foo. Could you please point me where is the problem? I am using material-ui, tileData is a json with image url etc...
Many thanks!
class Galery extends React.Component {
state = {
tileData: tileData
};
printThis = tile => {
console.log("printing tile... " + tile.target.value);
};
render() {
const classes = this.props;
return (
<div className={classes.root}>
<ButtonAppBar />
<div style={{ marginBottom: 20 }} />
<Grid container spacing={8}>
<Grid item xs={10}>
<GridList
cellHeight={250}
cellWidth={250}
cols={5}
spacing={4}
className={classes.gridList}
>
{tileData.map(tile => (
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
subtitle={<span>by: {tile.author}</span>}
actionIcon={
<IconButton
className={classes.icon}
value="foo"
onClick={this.printThis}
>
<i className="material-icons md-24 md-light">print</i>
</IconButton>
}
secondActionIcon={
<IconButton className={classes.icon}>
<i className="material-icons md-24 md-light">delete</i>
</IconButton>
}
/>
</GridListTile>
))}
</GridList>
</Grid>
<Grid item xs={2}>
<div className={classes.stats}>
<StatsTable />
</div>
</Grid>
</Grid>
</div>
);
}
}
It works for me to access the object id through event.currentTarget as per github answer here https://github.com/mui-org/material-ui/issues/7974#issuecomment-329250974
`
So my implementation is:
printThis = (event) => {
console.log('printing tile... '+ event.currentTarget.id);
};
<IconButton className={classes.icon} id = {tile.img} onClick={this.printThis}>
<i className="material-icons md-24 md-light" >
print
</i>
</IconButton>