multiplatform-tooltip

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

Installation

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.

Usage

import de.julianegner.multiplatformTooltip.TooltipWrapper

basic usage

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).

set position

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).

autoclose after delay

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.

custom content

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.

tooltips with clickable children

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

import de.julianegner.multiplatformTooltip.tooltipCompatibleClick

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.

Tooltips on Buttons

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

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

Platform Support

• 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)

Run Sample App

• 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

Publish to MavenLocal

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()
}

Publish to MavenCentral

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