ionic-tooltips
ionic-tooltips copied to clipboard
Allow word wrap for longer messages
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).
This works fine in the updated project. I have added an example to the demo here