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

Allow word wrap for longer messages #56

Open
ghost opened this issue Oct 17, 2018 · 1 comment
Open

Allow word wrap for longer messages #56

ghost opened this issue Oct 17, 2018 · 1 comment

Comments

@ghost
Copy link

ghost commented Oct 17, 2018

when using this module in a browser the longer messages will hit the border of screen and instead of wrapping onto a new line with a larger tooltip box they will instead be "pushed" away from that screen edge resulting in tooltips that start in odd positions on top of the element they are attached to.

Add the ability to override the built in functionality of having the tooltip on one line.

I fixed this for my own use by forking and removing the section of code that causes this in the directive. Perhaps adding another boolean to control this behave would help out other users?
Something like this in the tooltip.directive.ts:

  set allowTextWrap(val: boolean){
    this._wrapText = typeof val !== 'boolean' || val !== false;
  }

  get allowTextWrap(): boolean{
    return this._wrapText;
  }

private _wrapText: boolean = false;

if(this.allowTextWrap){
      if (
        positionLeft + tooltipNativeElement.offsetWidth + spacing >
        this.platform.width()
      ) {
        positionLeft =
          this.platform.width() - tooltipNativeElement.offsetWidth - spacing;
      } else if (positionLeft + tooltipNativeElement.offsetWidth - spacing < 0) {
        positionLeft = spacing;
      }
    }

This solves my problem of the horizontal word wrapping (only tested on browser, not mobile).

@jrquick17
Copy link

This works fine in the updated project. I have added an example to the demo here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants