How to make end Icon drawable tooltip in TextField jetpack compose-CodePudding

I have textfield and end drawable which is info type. When I click on that I want to open this tooltip look like this. Anyone guide me how can I make like this?

CodePudding user response：

You can draw this using Path and set it as shape of your Composable or check this speech bubble library i built. In demo section you can test with other properties. You can use BubbleLayout or BubbleColumn.

And use it as

BubbleColumn(
        bubbleState = rememberBubbleState(
            backgroundColor = DefaultBubbleColor,
            alignment = ArrowAlignment.BottomRight,
            arrowShape = ArrowShape.TRIANGLE_ISOSCELES,
            arrowWidth = 25.dp,
            arrowHeight = 20.dp,
            cornerRadius = 8.dp,
            shadow = BubbleShadow(elevation = 1.dp),
            padding = Padding(8.dp)
        )
    ) { Text(text = message) }

And show with as we show any Dialog with a mutableState with Boolean flag

var showInfo by remember {mutableStateOf(false)}

if(showInfo){
  Bubble...
}