Kotlin Multiplatform Library

Simple Tooltip for Kotlin Multiplatform Projects with Compose - for any compile target

Your app needs at least Kotlin 2.2.20-RC2 and Compose 1.9.0 to use this library

Add the dependency in your build.gradle.kts file:

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("de.julianegner:multiplatform-tooltip:1.0.0")
        }
    }
}

Kotlin 2.2.20-RC2 and Compose 1.9.0 or higher are required.

import de.julianegner.multiplatformTooltip.TooltipWrapper

TooltipWrapper(
    text = "Example Tooltip Text",
) {
    BasicText("A Text with a simple tooltip")
}

This shows a simple tooltip when hovering over the text on desktop platforms, or when long-pressing on mobile platforms (Android/iOS).

TooltipWrapper(
    text = "Example Tooltip Text",
    offset = DpOffset(x = (-120).dp, y = 50.dp)
) {
    BasicText("A Text with a manually positioned tooltip to the left")
}

This shows a tooltip left below the text when hovering over it (desktop) or long-pressing (mobile).

TooltipWrapper(
    text = "Example Tooltip Text",
    autocloseAfter = 5.seconds
) {
    BasicText("A Text with a tooltip that autocloses after 3 seconds")
}

This shows a tooltip that autocloses after 5 seconds when hovering over the text (desktop) or long-pressing (mobile). The default is 3 seconds.

5 seconds after opening, the tooltip disappears:

To use the standard modifier for tooltips, import: import de.julianegner.multiplatformTooltip.standardTooltipModifier

TooltipWrapper(
    text = "Example Tooltip Text",
    tooltipComposable = {
        Box(
            modifier = standardTooltipModifier()
                .background(Color(0xFF333333))
                .padding(8.dp)
        ) {
            Text(
                "This is a tooltip",
                color = Color.LightGray)
        }
    }
) {
    BasicText("A Text with a custom tooltip")
}

This shows a tooltip with custom content when hovering over the text (desktop) or long-pressing (mobile). The custom Content can be any Composable. So far, it is tested with Boxes only. It is not recommended to use complex Composables as tooltip content, like Buttons or other forms of input.

Not hovering the Text

Hovering the Text

For clickable elements inside tooltips that need both click functionality and tooltip support:

import de.julianegner.multiplatformTooltip.tooltipCompatibleClick

val color3 = Color(0xFFFFF3E0)

TooltipWrapper("Tooltip") {
    Card(
        modifier = Modifier
            .size(150.dp, 80.dp)
            .padding(4.dp)
            .tooltipCompatibleClick {
                clickCount++
                log("Card: tooltipCompatibleClick Count: $clickCount")
            },
        backgroundColor = color3
    ) {
        Text(
            "Card with tooltipCompatibleClick"
        )
    }
}

This enables both regular clicks (for button functionality) and long-press gestures (for tooltip display) on mobile platforms.

Buttons always have onClick, and on mobile, this prevents long tap from being recognized. So you need TooltipButton if you need a Button with tooltip on mobile.

import de.julianegner.multiplatformTooltip.TooltipButton

val color4 = Color(0xFFFCE4EC)

TooltipButton(
    tooltipText = "Tooltip Button",
    onClick = {
        buttonClick2++;
    },
    colors = ButtonDefaults.buttonColors(
        contentColor = Color.Black,
        backgroundColor = color4
    )
) {
    Text(
        text = "TooltipButton $buttonClick2",
        fontSize = 16.sp,
        textAlign = TextAlign.Center,
        fontWeight = FontWeight.Medium
    )
}

• Desktop (JVM): Hover to show tooltips
• Mobile (Android, iOS): Long-press to show tooltips
• Web (WASM, JS): Hover to show tooltips
• All platforms: Auto-close after specified duration (3 seconds default)

• Desktop JVM: ./gradlew :sample:composeApp:run
• Android: ./gradlew :sample:composeApp:assembleDebug (APK in sample/composeApp/build/outputs/apk/debug/)
• iOS: open 'sample/iosApp/iosApp.xcodeproj' in Xcode and run the sample app
• JavaScript: ./gradlew :sample:composeApp:jsBrowserDevelopmentRun
• Wasm: ./gradlew :sample:composeApp:wasmJsBrowserDevelopmentRun

1. Run ./gradlew :multiplatform-tooltip:publishToMavenLocal
2. Open ~/.m2/repository/de/julianegner/multiplatform-tooltip/ or [local maven repo path]/de/julianegner/multiplatform-tooltip/ if you have set a different path for your local maven repository
3. Check if the new version is there. Every version gets its own folder.

To use the local version in your project, add mavenLocal to your build.gradle.kts:

repositories {
    mavenLocal()
    mavenCentral()
    google()
}

I had to add it in the buildscript, too, to gain access to the local version of the library:

buildscript {
    repositories {
        mavenCentral()
        mavenLocal()
        google()
    }
}
repositories {
    mavenCentral()
    mavenLocal()
    google()
}

Additional Infos about setting up maven central: https://medium.com/simform-engineering/publishing-library-in-maven-central-part-1-994c5fe0c004

1. Create an account and a namespace on Sonatype:
   https://central.sonatype.org/register/central-portal/#create-an-account

2. Add developer id, name, email and the project url to
   ./multiplatform-tooltip/build.gradle.kts

3. Generate a GPG key:
   https://getstream.io/blog/publishing-libraries-to-mavencentral-2021/#generating-a-gpg-key-pair

   gpg --full-gen-key
   gpg --keyserver keyserver.ubuntu.com --send-keys XXXXXXXX
   gpg --export-secret-key XXXXXXXX > XXXXXXXX.gpg
   

4. Add these lines to ~/.gradle/gradle.properties:

   signing.keyId=XXXXXXXX
   signing.password=[key password]
   signing.secretKeyRingFile=../XXXXXXXX.gpg
   mavenCentralUsername=[generated username]
   mavenCentralPassword=[generated password]
   

Be aware that mavenCentralUsername and mavenCentralPassword are the name and key of the personal access token of maven central. See: https://central.sonatype.com/account

5. Run ./gradlew :multiplatform-tooltip:publishAndReleaseToMavenCentral --no-configuration-cache

6. wait for sync to MavenCentral (can take up to 2 hours)

7. check https://central.sonatype.com/publishing/deployments