diff --git a/README.md b/README.md
index e674732..30deba7 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,18 @@ Use the `format` prop to customize the [format](https://day.js.org/docs/en/displ
```
+When using `relative`, the `time` element will set the formatted timestamp as the `title` attribute. Specify a custom `title` to override this.
+
+```svelte
+
+```
+
+Set the value to `undefined` to omit the `title` altogether.
+
+```svelte
+
+```
+
### Live updates
Set `live` to `true` for a live updating relative timestamp. The default refresh interval is 60 seconds.
@@ -113,7 +125,9 @@ To customize the interval, pass a value to `live` in milliseconds (ms).
### `svelteTime` action
-Use the `svelteTime` action to format a timestamp in a raw HTML element.
+An alternative to the `Time` component is to use the `svelteTime` action to format a timestamp in a raw HTML element.
+
+The API is the same as the `Time` component.
```svelte
- (document.title = dayjs().format("MMM DD, YYYY"))}>
- Set title
+ (timestamp = dayjs().format("HH:mm:ss.SSSSSS"))}>
+ Update {timestamp}
```
diff --git a/src/Time.svelte b/src/Time.svelte
index d6161ad..e4a226d 100644
--- a/src/Time.svelte
+++ b/src/Time.svelte
@@ -62,6 +62,6 @@
$: title = relative ? dayjs(timestamp).format(format) : undefined;
-
+
{formatted}
diff --git a/src/svelte-time.d.ts b/src/svelte-time.d.ts
index 09d3d87..52ccc1d 100644
--- a/src/svelte-time.d.ts
+++ b/src/svelte-time.d.ts
@@ -2,7 +2,10 @@ import type { Action } from "svelte/action";
import type { TimeProps } from "./Time.svelte";
export interface SvelteTimeOptions
- extends Pick {}
+ extends Pick<
+ TimeProps,
+ "timestamp" | "format" | "relative" | "live" | "title"
+ > {}
export const svelteTime: Action<
HTMLElement,
diff --git a/src/svelte-time.js b/src/svelte-time.js
index ffaf84a..526c200 100644
--- a/src/svelte-time.js
+++ b/src/svelte-time.js
@@ -23,7 +23,13 @@ export const svelteTime = (node, options = {}) => {
let formatted = dayjs(timestamp).format(format);
if (relative) {
- node.setAttribute("title", formatted);
+ if ("title" in options) {
+ if (options.title !== undefined) {
+ node.setAttribute("title", options.title);
+ }
+ } else {
+ node.setAttribute("title", formatted);
+ }
if (live !== false) {
interval = setInterval(
diff --git a/tests/SvelteTime.test.ts b/tests/SvelteTime.test.ts
index 05f9fac..cf174cd 100644
--- a/tests/SvelteTime.test.ts
+++ b/tests/SvelteTime.test.ts
@@ -3,6 +3,7 @@ import { SvelteComponent, tick } from "svelte";
import { dayjs as dayjsExported } from "svelte-time";
import SvelteTime from "./SvelteTime.test.svelte";
import SvelteTimeLive from "./SvelteTimeLive.test.svelte";
+import SvelteTimeCustomTitle from "./SvelteTimeCustomTitle.test.svelte";
describe("svelte-time", () => {
let instance: null | SvelteComponent = null;
@@ -172,6 +173,32 @@ describe("svelte-time", () => {
expect(actionRelativeLive.getAttribute("datetime")).toEqual(timestamp);
});
+ test("SvelteTimeCustomTitle.test.svelte", async () => {
+ const target = document.body;
+
+ instance = new SvelteTimeCustomTitle({
+ target,
+ });
+
+ const relativeLive = target.querySelector(
+ '[data-test="custom-title"]',
+ ) as HTMLTimeElement;
+ const relativeLiveOmit = target.querySelector(
+ '[data-test="custom-title-omit"]',
+ ) as HTMLTimeElement;
+ const actionRelativeLive = target.querySelector(
+ '[data-test="action-custom-title"]',
+ ) as HTMLTimeElement;
+ const actionRelativeOmit = target.querySelector(
+ '[data-test="action-custom-title-omit"]',
+ ) as HTMLTimeElement;
+
+ expect(relativeLiveOmit.title).toEqual("");
+ expect(relativeLive.title).toEqual("Custom title");
+ expect(actionRelativeLive.title).toEqual("Custom title");
+ expect(actionRelativeOmit.title).toEqual("");
+ });
+
test("exported dayjs", () => {
expect(dayjsExported().from(dayjsExported())).toEqual("a few seconds ago");
});
diff --git a/tests/SvelteTimeCustomTitle.test.svelte b/tests/SvelteTimeCustomTitle.test.svelte
new file mode 100644
index 0000000..a9f785b
--- /dev/null
+++ b/tests/SvelteTimeCustomTitle.test.svelte
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+