noctalia-shell/Widgets/NTooltip.qml
2025-08-09 16:21:28 -04:00

125 lines
2.7 KiB
QML

import QtQuick
import QtQuick.Window 2.15
import qs.Services
import qs.Theme
Window {
id: root
readonly property real scaling: Scaling.scale(screen)
property bool isVisible: false
property string text: ""
property Item target: null
property int delay: 300
property bool positionAbove: false
property var _timerObj: null
flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
color: "transparent"
visible: false
onIsVisibleChanged: {
if (isVisible) {
if (delay > 0) {
if (_timerObj) {
_timerObj.destroy()
_timerObj = null
}
_timerObj = Qt.createQmlObject(
'import QtQuick 2.0; Timer { interval: ' + delay
+ '; running: true; repeat: false; onTriggered: root._showNow() }',
root)
} else {
_showNow()
}
} else {
_hideNow()
}
}
function show() {
isVisible = true;
}
function hide() {
isVisible = false;
}
function _showNow() {
// Compute new size everytime we show the tooltip
width = Math.max(50 * scaling, tooltipText.implicitWidth + 24 * scaling)
height = Math.max(50 * scaling, tooltipText.implicitHeight + 16 * scaling)
if (!target) {
return
}
if (positionAbove) {
// Position tooltip above the target
var pos = target.mapToGlobal(0, 0)
x = pos.x - width / 2 + target.width / 2
y = pos.y - height - 12 // 12 px margin above
} else {
// Position tooltip below the target
var pos = target.mapToGlobal(0, target.height)
x = pos.x - width / 2 + target.width / 2
y = pos.y + 12 // 12 px margin below
}
visible = true
}
function _hideNow() {
visible = false
if (_timerObj) {
_timerObj.destroy()
_timerObj = null
}
}
Connections {
target: root.target
function onXChanged() {
if (root.visible) {
root._showNow()
}
}
function onYChanged() {
if (root.visible) {
root._showNow()
}
}
function onWidthChanged() {
if (root.visible) {
root._showNow()
}
}
function onHeightChanged() {
if (root.visible) {
root._showNow()
}
}
}
Rectangle {
anchors.fill: parent
radius: Style.radiusMedium * scaling
color: Theme.backgroundTertiary
border.color: Theme.outline
border.width: 1 * scaling
opacity: 0.97
z: 1
}
Text {
id: tooltipText
text: root.text
color: Theme.textPrimary
font.family: Theme.fontFamily
font.pointSize: Theme.fontSizeMedium * scaling * 4
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap
z: 1
}
}