Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(tooltip): Support for tooltip-class configuration
Browse files Browse the repository at this point in the history
Closes #3126.
  • Loading branch information
Stepan Riha authored and wesleycho committed Mar 22, 2015
1 parent 0ecf7fa commit d784354
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 11 deletions.
28 changes: 22 additions & 6 deletions src/tooltip/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,36 @@
<p>
Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
aliquam. Tincidunt lobortis feugiat vivamus at
aliquam. Tincidunt lobortis feugiat vivamus at
<a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget
arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
<a href="#" tooltip-placement="right" tooltip="On the Right!">right</a>
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
<a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a>
pharetra convallis posuere morbi leo urna,
<a href="#" tooltip-placement="right" tooltip="On the Right!">right</a>
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
<a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a>
pharetra convallis posuere morbi leo urna,
<a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
<a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
</p>

<p>
I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
</p>

<p>
<style>
/* Specify styling for tooltip contents */
.tooltip.customClass .tooltip-inner {
color: #880000;
background-color: #ffff66;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
/* Hide arrow */
.tooltip.customClass .tooltip-arrow {
display: none;
}
</style>
I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
</p>

<form role="form">
Expand Down
1 change: 1 addition & 0 deletions src/tooltip/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ will display:
`tooltip-trigger`.
- `tooltip-append-to-body`: Should the tooltip be appended to `$body` instead of
the parent element?
- `tooltip-class`: Custom class to be applied to the tooltip.

The tooltip directives require the `$position` service.

Expand Down
17 changes: 16 additions & 1 deletion src/tooltip/test/tooltip2.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,22 @@ describe('tooltip directive', function () {

});

describe('class', function () {

it('can specify a custom class', function () {
var fragment = compileTooltip('<span tooltip="tooltip text" tooltip-class="custom">Trigger here</span>');
fragment.find('span').trigger( 'mouseenter' );

var ttipElement = fragment.find('div.tooltip');
expect(fragment).toHaveOpenTooltips();
expect(ttipElement).toHaveClass('custom');

closeTooltip(fragment.find('span'));
expect(fragment).not.toHaveOpenTooltips();
});

});

});

it('should show even after close trigger is called multiple times - issue #1847', function () {
Expand Down Expand Up @@ -144,5 +160,4 @@ describe('tooltip directive', function () {
// One needs to flush deferred functions before checking there is no tooltip.
expect(fragment).not.toHaveOpenTooltips();
});

});
9 changes: 7 additions & 2 deletions src/tooltip/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
'title="'+startSym+'title'+endSym+'" '+
'content="'+startSym+'content'+endSym+'" '+
'placement="'+startSym+'placement'+endSym+'" '+
'class="'+startSym+'class'+endSym+'" '+
'animation="animation" '+
'is-open="isOpen"'+
'>'+
Expand Down Expand Up @@ -276,6 +277,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
ttScope.title = val;
});

attrs.$observe( prefix+'Class', function ( val ) {
ttScope.class = val;
});

function prepPlacement() {
var val = attrs[ prefix + 'Placement' ];
ttScope.placement = angular.isDefined( val ) ? val : options.placement;
Expand Down Expand Up @@ -343,7 +348,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
return {
restrict: 'EA',
replace: true,
scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
scope: { content: '@', placement: '@', class: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/tooltip/tooltip-popup.html'
};
})
Expand All @@ -356,7 +361,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
return {
restrict: 'EA',
replace: true,
scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
scope: { content: '@', placement: '@', class: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html'
};
})
Expand Down
2 changes: 1 addition & 1 deletion template/tooltip/tooltip-html-unsafe-popup.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="tooltip {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
<div class="tooltip {{placement}} {{class}}" ng-class="{ in: isOpen(), fade: animation() }">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner" bind-html-unsafe="content"></div>
</div>
2 changes: 1 addition & 1 deletion template/tooltip/tooltip-popup.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="tooltip {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
<div class="tooltip {{placement}} {{class}}" ng-class="{ in: isOpen(), fade: animation() }">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner" ng-bind="content"></div>
</div>

0 comments on commit d784354

Please sign in to comment.