OSS探訪GitHubでログイン

Composeでアンカーに追従するツールチップを矢印・アニメーション・任意content付きで表示する

スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標(上限なし)です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
4,011
主要言語
Kotlin
ライセンス
Apache-2.0
リポジトリ最終更新
2026/09/28
ページ内ナビ

概要

BalloonはComposeとKotlin Multiplatform向けのツールチップ/ポップアップライブラリです。矢印、padding、角丸、色、animationなどをBalloonStyleへまとめ、BalloonStateから表示位置や開閉を制御できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日:

主な特徴

見た目をBalloonStyle、表示状態をBalloonStateへ分ける

rememberBalloonBuilderで矢印・余白・角丸・背景色・animationを定義し、rememberBalloonStateで表示状態を保持します。styleを更新しながら表示中のBalloonを再構成できます。

出典:[2]

Balloon composableまたはModifierからanchorへ結び付ける

Balloonでanchorを包む方法と、BalloonHost配下でModifier.balloonを使う方法を選べます。Tooltip本文はCompose slotなのでText・Icon・Rowなどを自由に構成できます。

出典:[2]

向いている用途

オンボーディングやcontext helpをCompose UIへ加えたい場合に向く

ボタンや画像などのanchorに対して補足を表示し、位置・animation・overlayをアプリのdesignへ合わせたいAndroid/KMPアプリに適します。

出典:[2]

導入前の確認

2.0.1はCompose Multiplatform 1.10.xとAndroid API 23以上が前提

公式Getting StartedではBalloon 2.0.1がCompose Multiplatform 1.10.xへ依存し、Androidのminimum SDKは23とされています。2.0.1ではscrollでanchorが画面外へ出たときの位置追従・dismiss問題も修正されています。

出典:[2][3]

参考にした公式資料

  1. [1]skydoves/Balloon — GitHub repository(2026-10-06)
  2. [2]Balloon 2.0.1 — Getting Started(2026-10-06)
  3. [3]Balloon 2.0.1 release(2026-10-06)
  4. [4]Balloon Apache-2.0 license(2026-10-06)
編集部からの補足

オンボーディングや補足説明をCompose UIへ組み込みたい場合に扱いやすいライブラリです。2.0系ではCompose Multiplatform中心へ再設計されているため、1.xから更新する場合はstyle/state APIとminimum SDKを確認してください。

3ステップで試す

  1. 1

    Balloon 2.0.1を追加する

    AndroidまたはCompose Multiplatformプロジェクトへ2.0.1を固定して追加します。AndroidはAPI 23以上が必要です。

    implementation("com.github.skydoves:balloon:2.0.1")
  2. 2

    tooltipのstyleとstateを作る

    公式Getting Startedに沿って見た目と表示状態を分離して定義します。

    val style = rememberBalloonBuilder { setArrowSize(10.dp) setPadding(12.dp) setCornerRadius(8.dp) } val balloonState = rememberBalloonState(style)
  3. 3

    anchorからtooltipを表示する

    ButtonをanchorとしてBalloonを表示し、位置追従と開閉を確認します。

    Balloon( state = balloonState, balloonContent = { Text("Edit your profile") }, ) { Button(onClick = { balloonState.showAlignTop() }) { Text("Edit") } }
公式READMEで確認

成長

成長の推移 · 直近30日

4,011 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit(直近30日)
9
Open PR
0

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHub Topics

  • kotlin
  • android
  • android-library
  • popup
  • animation
  • dsl
  • balloon
  • tooltip
  • tooltips
  • android-ui
  • skydoves
  • compose
Stars
4,011
Forks
310
Watchers
25
Open Issues
1
Contributors
31
所有者種別
User
主要言語
Kotlin
ライセンス
Apache-2.0
リポジトリ最終更新
2026/09/28

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか?