• Home
• Felgo
• AppToolTip

AppToolTip

Shows a tool tip overlay for a target item. More...

• List of all members, including inherited members

Properties

• arrowSize : real
• color : color
• contentComponent : Component
• hideBubble : bool
• highlightGradient : Gradient
• highlightSpread : real
• horizontalMargin : real
• horizontalPadding : real
• maximumContentWidth : real
• radius : real
• target : Item
• text : string
• textColor : color
• textSize : real
• verticalMargin : real
• verticalPadding : real

Detailed Description

The AppToolTip item displays a tool tip bubble for a specified target QML item. The default configuration displays the specified text within the tool tip. Changing the target of a tool tip while it is open will close the bubble and automatically open another bubble for the new target.

AppToolTip extends the AppOverlay type and includes a custom AppOverlay::backgroundItem that highlights the target by darkening the screen around it. The tool tip bubble is defined as AppOverlay::sourceItem, and should not be overwritten. To show custom content within the bubble, use the dedicated contentComponent property instead.

Usage Examples

Open a Tool Tip for a Target Item

Set the target and text property to configure a simple tool tip. Then call the open() function to display the tool tip:

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "ToolTip Page"

       AppButton {
         id: myButton
         text: "Open ToolTip"
         anchors.centerIn: parent
         onClicked: myToolTip.open()
       }

       AppToolTip {
         id: myToolTip
         target: myButton
         text: "This button opens a tool tip."
       }
     }
   }
 }

Customize the Tool Tip and Highlight Effect

To modify the highlight effect that is added by the default backgroundItem, use the highlightSpread, highlightGradient or backgroundColor property. You can also change the bubble color and radius, and even replace the contentComponent with a fully custom item:

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "Styled ToolTip Page"

       AppButton {
         id: myButton
         text: "Open ToolTip"
         anchors.centerIn: parent
         onClicked: myToolTip.open()
       }

       AppToolTip {
         id: myToolTip
         target: myButton
         text: "Shows a customized tool tip."
         color: "black"
         textColor: "white"
         textSize: sp(16)
         arrowSize: dp(12)
         radius: 0
         backgroundColor: Qt.rgba(0,0,0,0.5)
         highlightSpread: 3
         highlightGradient: Gradient {
           GradientStop { position: 0; color: "black" }
           GradientStop { position: 0.12; color: "black" }
           GradientStop { position: 0.18; color: Qt.rgba(0,0,0,0.6) }
           GradientStop { position: 0.5; color: "transparent" }
         }

         contentComponent: Row {
           anchors.centerIn: parent
           height: textItem.implicitHeight
           spacing: myToolTip.horizontalPadding

           AppIcon {
             id: iconItem
             iconType: IconType.info
             color: textItem.color
             anchors.verticalCenter: parent.verticalCenter
           }

           AppText {
             id: textItem
             width: Math.min(implicitWidth, myToolTip.maximumContentWidth - iconItem.width - parent.spacing)
             anchors.bottom: parent.bottom
             color: myToolTip.textColor
             fontSize: myToolTip.textSize
             Component.onCompleted: textItem.text = myToolTip.text // no binding
           }
         }
       }
     }
   }
 }

Tutorial Sequences with Multiple Targets

The AppToolTip also supports the creation of tool tip sequences, for example to give a short introduction tour. Simply change the target to automatically close the current tool tip and open it for another item:

 import QtQuick
 import Felgo

 App {
   id: app

   Navigation {
     id: navigation
     navigationMode: navigationModeTabs

     NavigationItem {
       title: "Home"
       iconType: IconType.home

       NavigationStack {
         AppPage {
           title: "First Page"

           AppButton {
             text: "Start Tour"
             anchors.centerIn: parent
             onClicked: tutorialToolTip.open()
           }
         }
       }
     }

     NavigationItem {
       title: "Info"
       iconType: IconType.info

       NavigationStack {
         AppPage {
           title: "Second Page"
         }
       }
     }
   }

   AppToolTip {
     id: tutorialToolTip
     target: firstTabPlaceholder
     text: target.toolTipText

     // deactivate auto-close and use a custom handler to switch through targets
     closeOnBackgroundClick: false
     onBackgroundClicked: {
       if(tutorialToolTip.isOpen && !tutorialToolTip.isAnimating)
         tutorialToolTip.next()
     }

     function next() {
       // move to the next target if not on the last one
       if(target !== secondTabPlaceholder) {
         target = secondTabPlaceholder
       }
       // sequence done, close and reset target
       else {
         tutorialToolTip.close()
         tutorialToolTip.target = firstTabPlaceholder
       }
     }
   }

   // placeholders for AppToolTip target areas of tabs in the navigation
   property real tabWidth: width / navigation.count
   property real tabHeight: dp(Theme.navigationTabBar.height)

   Item {
     id: firstTabPlaceholder
     width: tabWidth
     height: tabHeight
     anchors.bottom: parent.bottom
     anchors.bottomMargin: NativeUtils.safeAreaInsets.bottom

     property string toolTipText: "The first page of the app."
   }

   Item {
     id: secondTabPlaceholder
     x: tabWidth
     width: tabWidth
     height: tabHeight
     anchors.bottom: parent.bottom
     anchors.bottomMargin: NativeUtils.safeAreaInsets.bottom

     property string toolTipText: "Go here to see the second page."
   }
 }

Property Documentation

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "ToolTip Page"

       AppButton {
         id: myButton
         text: "Open ToolTip"
         anchors.centerIn: parent
         onClicked: myToolTip.open()
       }

       AppToolTip {
         id: myToolTip
         target: myButton
         text: "This button opens a tool tip."

         // example implementation of default content component
         contentComponent: Component {
           AppText {
             width: implicitWidth < myToolTip.maximumContentWidth ? implicitWidth : myToolTip.maximumContentWidth
             height: implicitHeight

             anchors.centerIn: parent
             verticalAlignment: Text.AlignVCenter

             font.pixelSize: myToolTip.textSize
             color: myToolTip.textColor

             // do not use a binding for the text
             // this ensures a fixed text for each content item even when animating between different target and text configurations
             Component.onCompleted: text = myToolTip.text
           }
         }

       }
     }
   }
 }

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       title: "ToolTip Page"

       AppButton {
         id: myButton
         text: "Open ToolTip"
         anchors.centerIn: parent
         onClicked: myToolTip.open()
       }

       AppToolTip {
         id: myToolTip
         target: myButton
         text: "This button opens a tool tip."

         // example configuration of the default highlight gradient
         highlightGradient: Gradient {
           GradientStop { position: 0; color: "black" }
           GradientStop { position: 0.1; color: "black" }
           GradientStop { position: 0.15; color: Qt.rgba(0,0,0,0.6) }
           GradientStop { position: 0.5; color: "transparent" }
         }

       }
     }
   }
 }