From 4299869ae9f09f6aa3d0c88d1782b62d02c7ccd8 Mon Sep 17 00:00:00 2001
From: pgrisu <42511852+pgrisu@users.noreply.github.com>
Date: Thu, 1 Aug 2019 11:43:47 +0200
Subject: [PATCH] Add multiline support on widget title tooltip

---
 ui/src/app/components/dashboard.tpl.html | 4 ++--
 ui/src/scss/main.scss                    | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/components/dashboard.tpl.html b/ui/src/app/components/dashboard.tpl.html
index 40cdac4baf..04b1330a65 100644
--- a/ui/src/app/components/dashboard.tpl.html
+++ b/ui/src/app/components/dashboard.tpl.html
@@ -48,8 +48,8 @@
 									<div class="tb-widget-title" layout="column" layout-align="center start" ng-show="vm.showWidgetTitlePanel(widget)">
 										<div ng-if="vm.hasWidgetTitleTemplate(widget)" ng-include="vm.widgetTitleTemplate(widget)"></div>
 										<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead title">{{vm.widgetTitle(widget)}}
-											<md-tooltip ng-show="vm.widgetTitleTooltip(widget)" md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
-												{{vm.widgetTitleTooltip(widget)}}
+											<md-tooltip class="tb-tooltip-multiline" ng-if="vm.widgetTitleTooltip(widget)" md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
+												<span ng-bind-html="vm.widgetTitleTooltip(widget)"></span>
 											</md-tooltip>
 										</span>
 										<tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 07cea7f1f7..e2c03ce2fe 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -483,6 +483,15 @@ pre.tb-highlight {
   @include line-clamp(2, 1.1);
 }
 
+.tb-tooltip-multiline {
+  max-width: 400px;
+  height: auto !important;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 1.5;
+  white-space: normal !important;
+}
+
 /***********************
  * Flow
  ***********************/