CODEWITHSUNDEEP
angularjsangularjs-directiveangular-bootstrap
boatcoder
boatcoder

Reputation: 18127

Popping a tooltip on focus when you can't add the tooltip to the <input element>

I'm using tooltips for the error explanation and coloring to indicate errors. On my datepicker fields, I have some validations about date range that I need to show. However if I try to put the datepicker and the tooltip on the same input element I get

Multiple directives [datepickerPopup, tooltipHtmlUnsafe] asking for new/isolated scope on: <input

This wasn't a problem until I "upgraded" to angular-bootstrap from the old version that used the bootstrapjs code to deal with the tooltips.

Is there some easy way I can use the focus on the datepicker input to cause the tooltip to pop, even when the input field can't get the tooltip directive?

Right now I have it as a hover on the label which is about as obvious as a subliminal message on your TV.

I have a field directive with an isolate scope that covers the input and the label associated with it, so that is the kind of context I have to work with.

Upvotes: 1

Views: 1314

Answers (1)

m.casey
m.casey

Reputation: 2599

Yes, there is a work around, but it's just that: a workaround. This is a known issue with AngularUI.

The solution is to wrap your input in another element and place the tooltip directive on the wrapping element like so:

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-controller="DatepickerDemoCtrl" style="padding-top:40px">
  <span tooltip="Set date">
    <input type="text" class="form-control" ng-click="opened = !opened" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" datepicker-options="dateOptions" />
  </span>
</body>

</html>

This may not work in all cases, but will work in most.

Upvotes: 0

Related Questions