Tooltip class
Material Design 툴팁.
툴팁은 버튼이나 기타 사용자 인터페이스 동작의 기능을 설명하는 텍스트 레이블을 제공합니다. 버튼을 툴팁 위젯으로 감싸고 위젯을 길게 눌렀을 때 표시되는 메시지를 제공합니다.
IconButton , FloatingActionButton , PopupMenuButton 과 같은 많은 위젯에는 tooltipnull이 아닌 경우 위젯이 빌드에 도구 설명을 포함하도록 하는 속성이 있습니다.
툴팁은 위젯의 텍스트 표현을 제공하여 시각적 위젯의 접근성을 개선합니다. 예를 들어, 화면 판독기를 통해 텍스트 표현을 음성으로 표현할 수 있습니다.
공식 문서 코드
ToolTip 은 우리가 웹에서 어떤 것에 마우스를 올리면(호버 하면) 보통 나오는 그 툴팁을 위젯으로 만들어 놓은 것이다.
사용법 또한 굉장히 간단한데 한번 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| message | String? | – | 툴팁에 표시할 간단한 문자열 메시지 |
| richMessage | InlineSpan? | – | 풍부한 스타일이 적용된 텍스트 메시지 |
| height | double? | null | 툴팁의 높이 |
| padding | EdgeInsetsGeometry? | 기기별 다름 | 툴팁 내부 여백 |
| margin | EdgeInsetsGeometry? | 0.0 | 툴팁과 화면 간의 외부 여백 |
| verticalOffset | double? | null | 툴팁과 대상 위젯 사이의 수직 거리 |
| preferBelow | bool? | true | 툴팁을 기본적으로 아래쪽에 표시할지 여부 |
| excludeFromSemantics | bool? | false | 접근성 트리에 툴팁을 포함할지 여부 |
| child | Widget? | null | 툴팁이 적용될 대상 위젯 |
| decoration | Decoration? | null | 툴팁의 배경 및 모양 스타일 |
| textStyle | TextStyle? | null | 툴팁 텍스트 스타일 (message 사용 시에만 적용) |
| textAlign | TextAlign? | start | 툴팁 텍스트의 정렬 방식 |
| waitDuration | Duration? | 0ms | 툴팁이 나타나기까지의 대기 시간 |
| showDuration | Duration? | 1.5초 | 툴팁이 표시되는 시간 |
| exitDuration | Duration? | 100ms | 포인터가 떠난 후 툴팁이 사라질 때까지의 시간 |
| enableTapToDismiss | bool | true | 탭으로 툴팁을 닫을 수 있는지 여부 |
| triggerMode | TooltipTriggerMode? | longPress | 툴팁을 표시하는 트리거 방식 |
| enableFeedback | bool? | true | 시각 또는 청각 피드백을 제공할지 여부 |
| onTriggered | TooltipTriggeredCallback? | null | 툴팁이 표시될 때 호출되는 콜백 |
| mouseCursor | MouseCursor? | MouseCursor.defer | 마우스 커서가 툴팁 위에 있을 때의 커서 모양 |
일단 가장 기본적으론 자신이 툴팁을 표시할 위젯에 툴팁을 감싸고 메시지를 넣으면 끝이다.
Tooltip(
message: 'it is tool tip',
child: Text(
'data',
),
),이러면 지정한 위젯을 클릭하거나 마우스를 올려놨을 때 툴팁에 작성한 메시지가 뜨게 된다.
이게 다 이긴 한데 심심하니 스타일 설정법을 좀 알아보자. 하위 속성에 있는 것들은 위에 표 보면서 쓰면 될 테고 공식 문서에 나와있는 스타일 설정을 좀 건드려 보자.
툴팁은 무조건 아래에 표시가 되는데 그 이유는 TooltipThemeData.preferBelow 가 true 이기 때문이라고 한다. 그렇다면 저걸 false 로 바꿔주면 위로 갈 것 같다.
Theme(
data: ThemeData(
tooltipTheme: TooltipThemeData(
preferBelow: false
)
),
child: Tooltip(
message: 'it is tool tip',
child: Text(
'data',
),
),
),
잘 표시가 되는 것 같다.
또한 간단하게 저 툴팁상자와 텍스트 스타일을 변경할 수 있는데 그건 decoration 과 textStyle 을 지정해 주면 되겠다.
Tooltip(
decoration: BoxDecoration(
color: Colors.white
),
message: 'it is tool tip',
textStyle: TextStyle(
color: Colors.black
),
child: Text(
'data',
),
),
Text 안에 있는 textStyle 로 변경을 하려고 하니까 적용이 되지 않았다. 무조건 저 속성을 사용해야 하는 것 같다.
암튼 이렇게 가볍게 툴팁에 대해서 알아보았다. enableFeedback 이 속성도 궁금해서 사용해 봤는데 잘 되지 않는 것 같아서 머리를 좀 긁적인 것 같았다. 도움이 되었길 바라며 마치겠다.
