diff --git a/components/MonitorDetail.tsx b/components/MonitorDetail.tsx
index da78228..2869866 100644
--- a/components/MonitorDetail.tsx
+++ b/components/MonitorDetail.tsx
@@ -1,4 +1,4 @@
-import { Text } from '@mantine/core'
+import { Text, Tooltip } from '@mantine/core'
import { MonitorState, MonitorTarget } from '@/uptime.types'
import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react'
import DetailChart from './DetailChart'
@@ -40,12 +40,21 @@ export default function MonitorDetail({
const uptimePercent = (((totalTime - downTime) / totalTime) * 100).toPrecision(4)
+ const monitorNameElement = (
+
+ {statusIcon} {monitor.name}
+
+ )
+
return (
<>
-
- {statusIcon} {monitor.name}
-
+ {monitor.tooltip ? (
+ {monitorNameElement}
+ ) : (
+ monitorNameElement
+ )}
+
Overall: {uptimePercent}%
diff --git a/uptime.config.ts b/uptime.config.ts
index 7cd1996..507a175 100644
--- a/uptime.config.ts
+++ b/uptime.config.ts
@@ -33,6 +33,8 @@ const config = {
method: 'POST',
// `target` is a valid URL
target: 'https://example.com',
+ // [OPTIONAL] `tooltip` is only used at status page to show a tooltip
+ tooltip: 'This is a tooltip for this monitor',
// [OPTIONAL] `expectedCodes` is an array of acceptable HTTP response codes, if not specified, default to 2xx
expectedCodes: [200],
// [OPTIONAL] `timeout` in millisecond, if not specified, default to 10000
@@ -55,6 +57,7 @@ const config = {
method: 'TCP_PING',
// `target` should be `host:port` for tcp monitors
target: '1.2.3.4:22',
+ tooltip: 'My production server SSH',
timeout: 5000,
},
],
diff --git a/uptime.types.ts b/uptime.types.ts
index 8c967d7..ced046d 100644
--- a/uptime.types.ts
+++ b/uptime.types.ts
@@ -33,6 +33,7 @@ type MonitorTarget = {
name: string
method: string // "TCP_PING" or Http Method (e.g. GET, POST, OPTIONS, etc.)
target: string // url for http, hostname:port for tcp
+ tooltip?: string
// HTTP Code
expectedCodes?: number[]