CODEWITHSUNDEEP
flutterdart
Aleksandr
Aleksandr

Reputation: 55

How to constain maxWidth of flutter Tooltip?

if the tooltip message is very long, the tooltip expands on the full screen size. How to avoid it and fix max width of tooltip message or convert it to multiline text?

Tooltip(
   message: "A very, very, very, very loooooooooooooooooong text of information icon",
   child: Icon(Icons.info_outline_rounded),
)

Upvotes: 5

Views: 4053

Answers (3)

Prabhu AP
Prabhu AP

Reputation: 141

You can use richMessage property instead of message.

                     Tooltip(
                            richMessage: WidgetSpan(
                                alignment: PlaceholderAlignment.baseline,
                                baseline: TextBaseline.alphabetic,
                                child: Container(
                                  padding: EdgeInsets.all(10),
                                  constraints:
                                      const BoxConstraints(maxWidth: 250),
                                  child: Text("Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Message"),
                                )),
                            decoration: BoxDecoration(
                              color: Color(0XFFDFE0FF),
                              borderRadius: const BorderRadius.all(
                                  Radius.circular(4)),
                            ),
                            preferBelow: false,
                            verticalOffset: 10,
                            child: Icon(
                              Icons.info_outline,
                              size: 20,
                            ),
                          ),

Upvotes: 10

Jahidul Islam
Jahidul Islam

Reputation: 12565

you can try with this and just tweak with margin

// call from outside 
 getToolTip("A very, very, very, very loooooooooooooooooong text of information icon", GlobalKey())

// tooltip        
getToolTip(String message, GlobalKey _toolTipKey) {
  return GestureDetector(
    onTap: (){
      final dynamic _toolTip = _toolTipKey.currentState;
      _toolTip.ensureTooltipVisible();
    },
    child: Tooltip(
      key: _toolTipKey,
      waitDuration: Duration(seconds: 1),
      showDuration: Duration(seconds: 2),
      preferBelow: true,
      verticalOffset: 20,
      margin: EdgeInsets.only(right: 50), //here you change the margin 
      padding: EdgeInsets.all(5),
      height: 16,
      message: message,
      child: Icon(
        Icons.add,
      ),
    ),
  );
}

enter image description here

Upvotes: 0

Martin
Martin

Reputation: 1219

You can manually add a break-line (\n) within the message. So for instance:

Tooltip(
   message: "A very, very, very, very\nloooooooooooooooooong\ntext of information icon",
   child: Icon(Icons.info_outline_rounded),
)

Upvotes: 2

Related Questions