Repository: zeppelin Updated Branches: refs/heads/master 32f35e2a7 -> b7f918a7b
[ZEPPELIN-1178] Tooltip: Show chart type when hovering over chart icon ### What is this PR for? A usability improvement: Added tooltips for the chart icons in Zeppelin paragraphs, showing the chart types when hovering over the chart icons. ### What type of PR is it? Improvement ### Todos NA ### What is the Jira issue? https://issues.apache.org/jira/browse/ZEPPELIN-1178 ### How should this be tested? 1. Deploy Zeppelin and navigate to zeppelin tutorial 2. Run a paragraph and hover over the chart icon buttons to see the tooltip getting displayed. ### Screenshots (if appropriate) ### Questions: * Does the licenses files need update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Author: vensant <venkatramana...@imaginea.com> Closes #1362 from vensant/ZEPPELIN-1178 and squashes the following commits: 38fcda8 [vensant] changed the tooltip names as per the review comment from the community 8a85449 [vensant] Added tooltips for the chart icons in Zeppelin paragraphs, showing the chart types when hovering over the chart icons Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/b7f918a7 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/b7f918a7 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/b7f918a7 Branch: refs/heads/master Commit: b7f918a7b81602f192c7cdd4b558f9167013b691 Parents: 32f35e2 Author: vensant <venkatramana...@imaginea.com> Authored: Fri Aug 26 15:09:20 2016 +0530 Committer: Damien CORNEAU <cornead...@gmail.com> Committed: Sat Aug 27 16:25:53 2016 +0900 ---------------------------------------------------------------------- .../paragraph/paragraph-chart-selector.html | 21 +++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/b7f918a7/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html index e2e4e35..eab741b 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html @@ -20,37 +20,44 @@ limitations under the License. <button type="button" class="btn btn-default btn-sm" ng-if="paragraph.result.type == 'TABLE'" ng-class="{'active': isGraphMode('table')}" - ng-click="setGraphMode('table', true)" ><i class="fa fa-table"></i> + ng-click="setGraphMode('table', true)" + tooltip="Table" tooltip-placement="bottom"><i class="fa fa-table"></i> </button> <button type="button" class="btn btn-default btn-sm" ng-if="paragraph.result.type == 'TABLE'" ng-class="{'active': isGraphMode('multiBarChart')}" - ng-click="setGraphMode('multiBarChart', true)"><i class="fa fa-bar-chart"></i> + ng-click="setGraphMode('multiBarChart', true)" + tooltip="Bar Chart" tooltip-placement="bottom"><i class="fa fa-bar-chart"></i> </button> <button type="button" class="btn btn-default btn-sm" ng-if="paragraph.result.type == 'TABLE'" ng-class="{'active': isGraphMode('pieChart')}" - ng-click="setGraphMode('pieChart', true)"><i class="fa fa-pie-chart"></i> + ng-click="setGraphMode('pieChart', true)" + tooltip="Pie Chart" tooltip-placement="bottom"><i class="fa fa-pie-chart"></i> </button> <button type="button" class="btn btn-default btn-sm" ng-if="paragraph.result.type == 'TABLE'" ng-class="{'active': isGraphMode('stackedAreaChart')}" - ng-click="setGraphMode('stackedAreaChart', true)"><i class="fa fa-area-chart"></i> + ng-click="setGraphMode('stackedAreaChart', true)" + tooltip="Area Chart" tooltip-placement="bottom"><i class="fa fa-area-chart"></i> </button> <button type="button" class="btn btn-default btn-sm" ng-if="paragraph.result.type == 'TABLE'" ng-class="{'active': isGraphMode('lineChart') || isGraphMode('lineWithFocusChart')}" - ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)"><i class="fa fa-line-chart"></i> + ng-click="paragraph.config.graph.lineWithFocus ? setGraphMode('lineWithFocusChart', true) : setGraphMode('lineChart', true)" + tooltip="Line Chart" tooltip-placement="bottom"><i class="fa fa-line-chart"></i> </button> <button type="button" class="btn btn-default btn-sm" ng-if="paragraph.result.type == 'TABLE'" ng-class="{'active': isGraphMode('scatterChart')}" - ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i> + ng-click="setGraphMode('scatterChart', true)" + tooltip="Scatter Chart" tooltip-placement="bottom"><i class="cf cf-scatter-chart"></i> </button> <button type="button" class="btn btn-default btn-sm" ng-if="paragraph.result.type == 'TABLE'" ng-class="{'active': isGraphMode('map')}" - ng-click="setGraphMode('map', true)"><i class="fa fa-map-marker"></i> + ng-click="setGraphMode('map', true)" + tooltip="Map" tooltip-placement="bottom"><i class="fa fa-map-marker"></i> </button> <button type="button"