トレイアイコンにマウスカーソルを合わせた際に表示されるツールチップ(テキスト)を設定・変更する方法を解説します。
Tauri v2 では、TrayIcon の作成時に tooltip オプションを指定するほか、setTooltip メソッドを使って後から動的に内容を書き換えることができます。
前提条件
※ アイコン画像のロード形式に合わせて image-png や image-ico が必要になる場合があります。
Cargo.toml の設定
Tauri v2 ではトレイ機能は Core (本体) に統合されているため、追加のプラグイン(tauri-plugin-tray など)のインストールは不要です。
ただし、src-tauri/Cargo.toml で tray-icon 機能を有効にする必要があります。
[dependencies]
tauri = { version = "2", features = ["tray-icon", "image-png"] }
Permissions (権限) の設定
src-tauri/capabilities/default.json に core: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 ではトレイアイコン(メニューバーアイコン)の挙動としてツールチップは一般的ではありません(表示されない場合があります)。