LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Accordion / Tooltip

{{group.text}}

{{group.body}}


In this sample you can see how to attach a tooltip to the Accordion group header.

Whenever a mouse cursor enters the group header title 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 accordion group. 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.accordion.css" />

<link rel="stylesheet" href="css/integralui.tooltip.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.accordion.min.js"></script>

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

</head>

<body>

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

<iui-accordion name="{{ctrlName}}" class="directive" groups="groups" iui-contextmenu="groupMenu" group-added="onGroupAdded(e)" iui-style="background:{{ctrlBackground}};border:{{ctrlBorder}}">

<iui-accordion-group ng-repeat="group in groups" name="{{group.name}}">

<iui-accordion-header>

<span iui-tooltip="group.tooltip">{{group.text}}</span>

</iui-accordion-header>

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

</iui-groupgroup>

</iui-accordion>

</div>

</body>

</html>

angular

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

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

$scope.ctrlName = "ctrlSample";

 

$scope.groups = [

{

name: 'group1',

text: 'Group 1',

tooltip: { title: 'Group 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: 'group2',

text: 'Group 2',

tooltip: { title: 'Group 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: 'group3',

text: 'Group 3',

tooltip: { title: 'Group 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;

height: 150px;

}

.iui-contextmenu-block

{

border-radius: 0;

padding: 2px;

}

.icons

{

margin-right: 5px;

vertical-align: middle;

}

.check-mark

{

background-position: -96px -48px;

}

.iui-tooltip

{

font-size: 0.75em;

}