Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip on button near right-edge of screen not re-positioning to fall within the screen width #1888

Closed
hydrodeveloper opened this issue Feb 21, 2021 · 0 comments
Labels
Type: Bug 🐞 Something isn't working
Milestone

Comments

@hydrodeveloper
Copy link

hydrodeveloper commented Feb 21, 2021

Describe the bug
I am creating a "top" tooltip for a button that is positioned near the right-edge of the screen. If the tooltip is "too wide", the width of the screen will increase to accommodate the width of the tooltip, thus causing a horizontal scroll bar to appear (with additional white space).

Screenshots
Here is an example of what is happening:
Tooltip Issue

Expected behavior
The tooltip (and tooltip arrow) should be automatically re-positioned (offset) to fall within the screen width.

Sample Code to Reproduce Behavior
<Container Fluid="true" Class="pt-3">
..
..
..
....<Row>
........<Column ColumnSize="ColumnSize.Is3">
............<Addons>
................<Addon AddonType="AddonType.Body">
....................<TextEdit Text="Snapshots" Plaintext="true"/>
................</Addon>
................<Addon AddonType="AddonType.Body">
....................<Tooltip Placement="Placement.Top" Text="Copy Selected Snapshot to Buffer">
........................<Button>
............................<Blazorise.Icons.FontAwesome.Icon Name="FontAwesomeIcons.ArrowUp"/>
........................</Button>
....................</Tooltip>
................</Addon>
................<Addon AddonType="AddonType.End">
....................<Tooltip Placement="Placement.Top" Text="Delete Selected Snapshot">
........................<Button>
............................<Blazorise.Icons.FontAwesome.Icon Name="FontAwesomeIcons.Times"/>
........................</Button>
....................</Tooltip>
................</Addon>
................<Addon AddonType="AddonType.End">
....................<Tooltip Placement="Placement.Top" Text="Flag Selected Snapshot">
........................<Button>
............................<Blazorise.Icons.FontAwesome.Icon Name="FontAwesomeIcons.Flag"/>
........................</Button>
....................</Tooltip>
................</Addon>
............</Addons>
........</Column>
....</Row>
</Container>

@hydrodeveloper hydrodeveloper changed the title Tooltip on element near right edge of screen not re-positioned to fall within the screen width Tooltip on element near right-edge of screen not re-positioned to fall within the screen width Feb 21, 2021
@hydrodeveloper hydrodeveloper changed the title Tooltip on element near right-edge of screen not re-positioned to fall within the screen width Tooltip on button near right-edge of screen not re-positioning to fall within the screen width Feb 21, 2021
@stsrki stsrki added the Type: Bug 🐞 Something isn't working label Mar 26, 2021
@stsrki stsrki added this to the 0.9.4 milestone Mar 26, 2021
@stsrki stsrki mentioned this issue Mar 31, 2021
@stsrki stsrki closed this as completed Mar 31, 2021
@stsrki stsrki moved this to ✔ Done in Development Jul 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug 🐞 Something isn't working
Projects
Archived in project
Development

No branches or pull requests

2 participants