never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NTooltip: wip

Browse source
This commit is contained in:
quadbyte 2025-08-09 16:21:28 -04:00
parent 3790508674
commit 446bbe68d8
2 changed files with 48 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Modules/Bar/Bar.qml
View file

@ -46,15 +46,15 @@ PanelWindow {
id: myIconButton id: myIconButton
icon: "refresh" icon: "refresh"
onEntered: function() { onEntered: function() {
myTooltip.tooltipVisible = true; myTooltip.show();
} }
onExited: function() { onExited: function() {
myTooltip.tooltipVisible = false; myTooltip.hide();
} }
} }
NTooltip { NTooltip {
id: myTooltip id: myTooltip
targetItem: myIconButton target: myIconButton
positionAbove: false positionAbove: false
text: "Hello world" text: "Hello world"
} }

94
Widgets/NTooltip.qml
View file

@ -4,23 +4,23 @@ import qs.Services
import qs.Theme import qs.Theme
Window { Window {
id: tooltipWindow id: root
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
property bool isVisible: false
property string text: "" property string text: ""
property bool tooltipVisible: false property Item target: null
property Item targetItem: null
property int delay: 300 property int delay: 300
property bool positionAbove: true property bool positionAbove: false
property var _timerObj: null
flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
color: "transparent" color: "transparent"
visible: false visible: false
property var _timerObj: null onIsVisibleChanged: {
if (isVisible) {
onTooltipVisibleChanged: {
if (tooltipVisible) {
if (delay > 0) { if (delay > 0) {
if (_timerObj) { if (_timerObj) {
_timerObj.destroy() _timerObj.destroy()
@ -28,8 +28,8 @@ Window {
} }
_timerObj = Qt.createQmlObject( _timerObj = Qt.createQmlObject(
'import QtQuick 2.0; Timer { interval: ' + delay 'import QtQuick 2.0; Timer { interval: ' + delay
+ '; running: true; repeat: false; onTriggered: tooltipWindow._showNow() }', + '; running: true; repeat: false; onTriggered: root._showNow() }',
tooltipWindow) root)
} else { } else {
_showNow() _showNow()
} }
@ -38,23 +38,31 @@ Window {
} }
} }
function _showNow() { 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) width = Math.max(50 * scaling, tooltipText.implicitWidth + 24 * scaling)
height = Math.max(50 * scaling, tooltipText.implicitHeight + 16 * scaling) height = Math.max(50 * scaling, tooltipText.implicitHeight + 16 * scaling)
if (!targetItem) if (!target) {
return return
}
if (positionAbove) { if (positionAbove) {
// Position tooltip above the target item // Position tooltip above the target
var pos = targetItem.mapToGlobal(0, 0) var pos = target.mapToGlobal(0, 0)
x = pos.x - width / 2 + targetItem.width / 2 x = pos.x - width / 2 + target.width / 2
y = pos.y - height - 12 // 12 px margin above y = pos.y - height - 12 // 12 px margin above
} else { } else {
// Position tooltip below the target item // Position tooltip below the target
var pos = targetItem.mapToGlobal(0, targetItem.height) var pos = target.mapToGlobal(0, target.height)
x = pos.x - width / 2 + targetItem.width / 2 x = pos.x - width / 2 + target.width / 2
y = pos.y + 12 // 12 px margin below y = pos.y + 12 // 12 px margin below
} }
visible = true visible = true
@ -69,30 +77,34 @@ Window {
} }
Connections { Connections {
target: tooltipWindow.targetItem target: root.target
function onXChanged() { function onXChanged() {
if (tooltipWindow.visible) if (root.visible) {
tooltipWindow._showNow() root._showNow()
}
} }
function onYChanged() { function onYChanged() {
if (tooltipWindow.visible) if (root.visible) {
tooltipWindow._showNow() root._showNow()
}
} }
function onWidthChanged() { function onWidthChanged() {
if (tooltipWindow.visible) if (root.visible) {
tooltipWindow._showNow() root._showNow()
}
} }
function onHeightChanged() { function onHeightChanged() {
if (tooltipWindow.visible) if (root.visible) {
tooltipWindow._showNow() root._showNow()
}
} }
} }
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: 18 radius: Style.radiusMedium * scaling
color: Theme.backgroundTertiary || "#222" color: Theme.backgroundTertiary
border.color: Theme.outline || "#444" border.color: Theme.outline
border.width: 1 * scaling border.width: 1 * scaling
opacity: 0.97 opacity: 0.97
z: 1 z: 1
@ -100,30 +112,14 @@ Window {
Text { Text {
id: tooltipText id: tooltipText
text: tooltipWindow.text text: root.text
color: Theme.textPrimary color: Theme.textPrimary
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall * scaling font.pointSize: Theme.fontSizeMedium * scaling * 4
anchors.centerIn: parent anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap wrapMode: Text.Wrap
padding: 8 z: 1
z: 2
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.ArrowCursor
hoverEnabled: true
onExited: tooltipWindow.tooltipVisible = false
}
onTextChanged: {
width = Math.max(minimumWidth * scaling,
tooltipText.implicitWidth + 24 * scaling)
height = Math.max(minimumHeight * scaling,
tooltipText.implicitHeight + 16 * scaling)
} }
} }