Conditional tooltip with Bootstrap 3 and angular

Question

So I can get tooltips to appear on field focus, but I only want them to sometimes. I want to add a manual trigger, but to say the docs are lacking would be to indicate that some exist. Here's what I've found so far (in the source)

// Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};

...

/**
 * This allows you to extend the set of trigger mappings available. E.g.:
 *
 *   $tooltipProvider.setTriggers( 'openTrigger': 'closeTrigger' );
 */
this.setTriggers = function setTriggers ( triggers ) {
  angular.extend( triggerMap, triggers );
};

So, how do you write one of these triggers?

"I want to add a manual trigger .." - What exactly do you mean? What are you trying to achieve? — Stewie
– Stewie, Commented Jan 17, 2014 at 11:56
I only want tooltips when the field has an error. Right now you can trigger on focus, click, etc.... And they talk about a manual trigger. I just want to know how to do that. — boatcoder
– boatcoder, Commented Jan 18, 2014 at 0:12
I think you want to take a look at this question: Enable angular-ui tooltip on custom events. — Stewie
– Stewie, Commented Jan 18, 2014 at 8:44

David · Accepted Answer · 2015-04-17 09:39:36Z

if you are still searching for a solution it might be handy to know that the tooltips only show when there is a text value, otherwise they don't actually show.

I myself use the popover directive, here is a plunker where you can edit your text. When you clear the field, the tooltip won't show.

http://plnkr.co/edit/Zdkyhc90qTZFzLEwtrVL?p=preview

<body ng-controller="MainCtrl">
  <br/><br/>
  <input type="text" size="100" ng-model="error"/><br/><br/>
  <p class="btn btn-default" 
     popover="{{error}}" 
     popover-placement="right" 
     popover-trigger="mouseenter">Hover my error!</p>
</body>

And in the controller you just set the error initial value. Make sure you include 'ui.bootstrap' as a dependency for your app, else it won't work.

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.error = 'Something went wrong';
});

CAK2 · Accepted Answer · 2016-09-01 22:43:36Z

AngularJS 1.5.7 and Bootstrap 3.3.6 support uib-tooltip-html properties on input, select and textarea elements. Unlike uib-tooltip properties, uib-tooltip-html properties support expressions. You should be able to express your conditions therein.

For example, here is a date of birth textbox with an expression that either names the field when valid OR explains the validation error:

<input id="dateOfBirth{{::vm.studentID}}"
			   name="dateOfBirth"
			   placeholder="Date of Birth"
			   uib-tooltip-html="myFormName.dateOfBirth.$valid ? 'Date of Birth' : myFormName.dateOfBirth.$error.required ? 'Date of Birth is required' : 'Date of Birth is not a valid date: mm/dd/yyyy'"
			   type="date"
			   class="form-control"
			   data-ng-model="vm.dateOfBirth"
			   data-ng-required="vm.editMode"
			   min="1920-01-01"
			   data-ng-max="vm.maxDateOfBirth"
			   tabindex="3" />

With a little more work you could explain the min and max date errors as well.

Stéphane Bruckert · Accepted Answer · 2017-08-02 15:15:35Z

1

<label>
    Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
</label>

Check the tooltip part of the API doc

edited Aug 2, 2017 at 15:15

Stéphane Bruckert

23.1k15 gold badges102 silver badges136 bronze badges

answered Aug 2, 2017 at 6:03

Kane

111 bronze badge

1 Comment

Yunnosch Over a year ago

This is a sensible recommendation. But if there is an actual answer inside, then you need to elaborate a little, in order to make that more obvious. E.g. explain what the code fragment achieves and how. As it is now, it is pretty close to being flagged as "not an answer". Also, please take the tour.

Arun · Accepted Answer · 2018-09-07 11:04:09Z

1

we can use popover-enable property to show it conditional

answered Sep 7, 2018 at 11:04

Arun

4603 silver badges8 bronze badges

Comments

melkorCba · Accepted Answer · 2021-05-13 07:11:50Z

0

This can be archived through Angular Property binding and the title property of the bootstrap element. In Bootstrap, a tooltip will only show in the DOM if some text was given for the title value. What you have to do is to bind property or method to the tooltip. Here getTooltip() should return either tooltip or empty string.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" [title]="getTooltip()">

answered May 13, 2021 at 7:11

melkorCba

5206 silver badges13 bronze badges

Collectives™ on Stack Overflow

Conditional tooltip with Bootstrap 3 and angular

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related