LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TabStrip / Tooltip

{{tab.text}}

{{tab.body}}


In this sample you can see how to attach a tooltip to the TabStrip tabs.

Whenever a mouse cursor enters the tab space, a tooltip will appear. To simplify this example, the default tooltip settings are used and only the tooltip title is set.

We are using the IntegralUI Tooltip directive to apply a tooltip to each tab. This directive accepts an object with all options that determines the appearance and behavior of the tooltip. Here is a list of available options for the Tooltip directive:

  • enabled - determines whether the Tooltip is enabled or disabled
  • showMarker - when true, an arrow marker will be displayed for the Tooltip window
  • title - title of the Tooltip, can contain multiple lines of text or any custom HTML
  • position - determines where the Tooltip will appear: above, below, left or right side of the target element or at mouse position
  • initialDelay - the time in miliseconds prior Tooltip is shown
  • autoPopDelay - the time in miliseconds for Tooltip to remain visible

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.tabstrip.css" />

<link rel="stylesheet" href="css/integralui.contextmenu.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.tabstrip.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.contextmenu.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs" iui-contextmenu="tabMenu" tab-added="onTabAdded(e)" tab-removed="onTabRemoved(e)" iui-style="background:{{ctrlBackground}};border:{{ctrlBorder}}">

<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}">

<iui-tab-header iui-tooltip="tab.tooltip">

{{tab.text}}

</iui-tab-header>

<p class="custom-content">{{tab.body}}</p>

</iui-tab>

</iui-tabstrip>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITabStripService", function($scope, $ctrlService){

$scope.ctrlName = "ctrlSample";

 

$scope.tabs = [

{

name: 'tab1',

text: 'Tab 1',

tooltip: { title: 'Tab 1' },

body: 'Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.'

},

{

name: 'tab2',

text: 'Tab 2',

tooltip: { title: 'Tab 2' },

body: 'Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.'

},

{

name: 'tab3',

text: 'Tab 3',

tooltip: { title: 'Tab 3' },

body: 'Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.'

}

];

}]);

.custom-content

{

margin: 0;

padding: 5px;

}

.iui-contextmenu-block

{

border-radius: 0;

padding: 2px;

}

.iui-contextmenu-item

{

width: 140px;

}

.icons

{

margin-right: 5px;

vertical-align: middle;

}

.check-mark

{

background-position: -96px -48px;

}

.iui-tooltip

{

font-size: 0.75em;

}