トレイアイコンにマウスオーバー時の文字を出す

Recipe ID: menu-011

トレイアイコンにマウスカーソルを合わせた際に表示されるツールチップ(テキスト)を設定・変更する方法を解説します。

Tauri v2 では、TrayIcon の作成時に tooltip オプションを指定するほか、setTooltip メソッドを使って後から動的に内容を書き換えることができます。

前提条件

※ アイコン画像のロード形式に合わせて image-pngimage-ico が必要になる場合があります。

Cargo.toml の設定

Tauri v2 ではトレイ機能は Core (本体) に統合されているため、追加のプラグイン(tauri-plugin-tray など)のインストールは不要です。
ただし、src-tauri/Cargo.tomltray-icon 機能を有効にする必要があります。

[dependencies]
tauri = { version = "2", features = ["tray-icon", "image-png"] }

Permissions (権限) の設定

src-tauri/capabilities/default.jsoncore:tray:default を追加します。

{
  "permissions": [
    ...,
    "core:tray:default",
    "core:menu:default", // メニューを表示する場合
    "core:app:allow-default-window-icon" // defaultWindowIcon を使用する場合
  ]
}

1. フロントエンドから変更する (TypeScript)

TrayIcon.getById などでインスタンスを取得し、setTooltip を呼び出します。

import { TrayIcon } from '@tauri-apps/api/tray';

async function updateStatusMessage(statusText: string) {
  // 既存のトレイアイコンを取得
  const tray = await TrayIcon.getById('tray');

  if (tray) {
    // ツールチップを更新
    // null を渡すとツールチップを削除できます
    await tray.setTooltip(`MyApp status: ${statusText}`);
  }
}

2. バックエンドから変更する (Rust)

Rust 側でも set_tooltip メソッドで変更可能です。

use tauri::tray::TrayIconBuilder;
use tauri::Manager;

#[tauri::command]
fn update_tooltip(app_handle: tauri::AppHandle, text: String) {
    if let Some(tray) = app_handle.tray_by_id("tray") {
        tray.set_tooltip(Some(text)).unwrap();
    }
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let _tray = TrayIconBuilder::with_id("tray")
                .icon(app.default_window_icon().unwrap().clone())
                .tooltip("初期ツールチップ") // 初期設定
                .build(app)?;
            Ok(())
        })
        .invoke_handler(tauri::generate_handler![update_tooltip])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

補足

* OSごとの挙動: Windows や Linux ではツールチップが表示されますが、macOS ではトレイアイコン(メニューバーアイコン)の挙動としてツールチップは一般的ではありません(表示されない場合があります)。