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

Tooltips #263

Closed
brettwinters opened this issue Sep 19, 2019 · 6 comments
Closed

Tooltips #263

brettwinters opened this issue Sep 19, 2019 · 6 comments
Labels
Status: Investigate Needs to investigate more to what can be done. Type: Feature Request ⛱ New feature or request
Milestone

Comments

@brettwinters
Copy link

hi @stsrki

Couple of issues :

(1) I noticed that your Tooltip display an empty tooltip even when Text is "" (or null).

image

According to Bootstrap Docs "Tooltips with zero-length titles are never displayed."

Would you be able to fix this?

(2) Another issue, I have a Tooltip inside a fixed-width div

image

From memory, I think attaching the tooltip to the body element like this data-container="body" solves the issue, but I can't test it. Would you be able to expose a property called "Container" - because tooltips always have this issue since they need to float on top of everything

image

Regards

Brett

@stsrki
Copy link
Collaborator

stsrki commented Sep 19, 2019

Hi @brettwinters

  1. I'm using custom implementation for Tooltip instead of popper.js implementation that comes with Bootstrap. The reason is that I wanted to add support for all Blazorise providers without adding a third-party dependency. In this case the popper.js. Since my own implementation is fully done with css I will see what can be done for empty strings.

  2. As stated in first answer adding this attribute will not help since the tooltip is custom made.

@stsrki stsrki added Type: Feature Request ⛱ New feature or request Status: Investigate Needs to investigate more to what can be done. labels Sep 19, 2019
@stsrki stsrki added this to the Backlog milestone Sep 19, 2019
@brettwinters
Copy link
Author

Also, while you're looking at enhancements the following features would also be useful:

(1) Support for longer messages and allow the Environment.NewLine (CR, LF) within the message. Currently the message is truncated with an ellipses ("xxxxxx ...") and CR/LF seems to be ignored)

(2) Allow html messages - bootstrap does this via a boolean html flag - although the bootstrap documentation also says

"Use text if you're worried about XSS attacks."

but I don't really know the risks and this feature is not so important.

(3) I've found that I need to display inline the tooltip as follows in every case because otherwise it displays as a block and the tooltip shows in the middle of the block

<div class="py-5">
    <label>Label : </label>
    <Tooltip Text="This is a tooltip">
        <label>Wrapped Item</label>
    </Tooltip>
</div>

Before

image

After

.b-tooltip {
    display: inline;
}

image

Regards

Brett

@stsrki
Copy link
Collaborator

stsrki commented Sep 20, 2019

Hi @brettwinters

  1. This should not be a problem
  2. It would require a major rewrite of Tooltip so I would skip this feature for now.
  3. This is possible when Blazorise components are used inside of <Tooltip>. But when there are native tags like <label> I cannot do much.

What I can do is to add IsInline attribute to <Tooltip> so that it can be controller manually if needed

@stsrki stsrki modified the milestones: Backlog, 0.8.6 Sep 20, 2019
@stsrki
Copy link
Collaborator

stsrki commented Nov 22, 2019

Most of the things is fixed with #376

@stsrki stsrki closed this as completed Nov 22, 2019
@stsrki stsrki mentioned this issue Nov 22, 2019
22 tasks
@WillianGruber
Copy link
Contributor

New release worked perfectly for tooltips, thank you @stsrki

@StephaneJourdois
Copy link

hi @stsrki, hi all

this tooltip issue is back with new release :)

-> Tooltip display an empty tooltip when Text is "" (or null).

Thanks for your work.

S.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Investigate Needs to investigate more to what can be done. Type: Feature Request ⛱ New feature or request
Projects
Archived in project
Development

No branches or pull requests

4 participants