Tooltip Arrows
From syxUI — written for both platforms, not translated between them.
Tooltips pointing in four directions.
Feedback · SwiftUI · iOS 17
- feedback
- swiftui
The actual source
TooltipDirections.swift
// Tooltip Arrows · syxUI · https://syxui.dev/components/tip-directions
// Free in any project. Keep this line and credit syxUI where a person can read it.
import SwiftUI
let ttDark = Color(red: 0.15, green: 0.15, blue: 0.17)
struct TooltipDirections: View {
var body: some View {
VStack(spacing: 22) {
HStack(spacing: 30) {
VStack(spacing: -2) { Text("Top").font(.system(size: 13, weight: .medium)).foregroundStyle(.white).padding(.horizontal, 12).padding(.vertical, 8).background(ttDark, in: RoundedRectangle(cornerRadius: 9)); Image(systemName: "arrowtriangle.down.fill").font(.system(size: 11)).foregroundStyle(ttDark) }
HStack(spacing: -2) { Image(systemName: "arrowtriangle.left.fill").font(.system(size: 11)).foregroundStyle(ttDark); Text("Left").font(.system(size: 13, weight: .medium)).foregroundStyle(.white).padding(.horizontal, 12).padding(.vertical, 8).background(ttDark, in: RoundedRectangle(cornerRadius: 9)) }
}
HStack(spacing: 30) {
VStack(spacing: -2) { Image(systemName: "arrowtriangle.up.fill").font(.system(size: 11)).foregroundStyle(ttDark); Text("Bottom").font(.system(size: 13, weight: .medium)).foregroundStyle(.white).padding(.horizontal, 12).padding(.vertical, 8).background(ttDark, in: RoundedRectangle(cornerRadius: 9)) }
HStack(spacing: -2) { Text("Right").font(.system(size: 13, weight: .medium)).foregroundStyle(.white).padding(.horizontal, 12).padding(.vertical, 8).background(ttDark, in: RoundedRectangle(cornerRadius: 9)); Image(systemName: "arrowtriangle.right.fill").font(.system(size: 11)).foregroundStyle(ttDark) }
}
}
}
}
iOS 17 · No dependencies
Dependencies
- SwiftUI
- No external dependencies
Requires iOS 17
