Tooltip overlap view when content is bigger than space between view and screen edge

[Beb3r]

Please complete the following information:

• Library Version 1.2.9
• Affected Device(s) All

Describe the Bug:

When the tooltip content is bigger than the space between the pointed view and the screen edge, the tooltip overlap the view.

Expected Behavior:

The tooltip shouldn't overlap the view, it should increase its height or width instead, making the content on multiple lines

For example let take this simple screen with a text view. We want to display the tooltip on its left side:

But adding right margin to the textview causes this:

[skydoves]

Sorry for the late reaction, @Beb3r.

Because #148 can affect some changes on this issue, but It has been solved in the new release.
I will look into details about this issue soon and try to include this issue in the next release.

[Beb3r]

No problem! Let me know if you need any QA on that for the next release!

[skydoves]

I was thinking about this issue recently, it seems to need tricky ways. 🤔

The body content of the Balloon will be measured before showing the balloon over the anchor views, also the showing functionalities are definitely independent of the properties. That means we should re-measure the size of the balloon based on the showing functionalities.

For example, if we want to show up this balloon using showAlignLeft, we should know the specific coordinate of the anchor view and the size of the balloon content. If the space between 0 and coordinate-x of the anchor view is smaller than the balloon content, we should re-measure the balloon content.

On the other hand, If we show up the balloon using showAlignBottom, the above process will not require anymore.

The simplest solution is just to put the reasonable with size into setWidth if your text is long enough.
I think we can face this kind of issue only when we use BalloonSizeSpec.WRAP as width or height, I will consider some other solutions like setMinWidth, setMaxWidth.

Thanks!

[skydoves]

Hi @Beb3r,
It seems too late, but there is a new solution.
You can resolve this issue like the below on a new stable 1.3.7.

balloon.bodyWindow.setOverlapAnchor(false)

or

balloon.setAttachedInDecor(false)

Thanks for your issue!

[thaiquoctoanvn]

Hi @skydoves, I have used 1.4.8 version currently and still got this issue. Also tried the solution you suggested above but it seems nothing happen. Do you have any idea on my problem? Thanks.

private fun createTooltipView(
        message: String,
        lifecycleOwner: LifecycleOwner,
        shape: BalloonOverlayShape,
        arrowOrientation: ArrowOrientation
    ): Balloon {
        return Balloon.Builder(this)
            .setWidth(BalloonSizeSpec.WRAP)
            .setHeight(BalloonSizeSpec.WRAP)
            .setText(message)
            .setTextColorResource(R.color._efedff)
            .setTextSize(16f)
            .setTextGravity(Gravity.CENTER)
            .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
            .setArrowOrientation(arrowOrientation)
            .setArrowSize(10)
            .setArrowPosition(0.5f)
            .setArrowAlignAnchorPadding(2)
            .setPadding(16)
            .setCornerRadius(8f)
            .setBackgroundColorResource(R.color._8bc34c)
            .setBalloonAnimation(BalloonAnimation.ELASTIC)
            .setLifecycleOwner(lifecycleOwner)
            .setDismissWhenTouchOutside(true)
            .setDismissWhenClicked(true)
            .setIsVisibleOverlay(true)
            .setOverlayPadding(8f)
            .setOverlayColorResource(R.color._00000075)
            .setOverlayPaddingColorResource(R.color._2c3639)
            .setDismissWhenOverlayClicked(true)
            .setOverlayShape(shape)
            .setBalloonHighlightAnimation(BalloonHighlightAnimation.SHAKE)
            .build()
            .apply {
                bodyWindow.overlapAnchor = false
            }
    }