Datepicker and tooltip conflict

[tamtakoe]

I want show comment for date or error message if date incorrect etc. I cant do it because

Error: [$compile:multidir] Multiple directives
[datepickerPopup, tooltip] asking for new/isolated
scope on: <input type="text" class="form-control"
ng-click="opened = !opened" datepicker-popup=
"dd-MMMM-yyyy" ng-model="dt" is-open="opened"
datepicker-options="dateOptions" tooltip="Set data">

http://plnkr.co/edit/puO9KD7AJSadR7znTMZ9

Fix it, please

[leoduran]

As I understand things, because both directives create an isolated scope, you'll have to wrap the input with another element and use the tooltip on the wrapper element.

See this plunkr: http://plnkr.co/edit/7Bhu8IkSYXmGpI7UTfy6

[tamtakoe]

Unfortunately I can't do it. Some times I use directives with template like:

<div class="inputGroup inputGroup_form inputGroup_addonRight input-group-lg">
    <input class="inputGroup-input inputGroup-input_form form-control"
           type="{{show ? 'text' : 'password'}}"
           ng-model="model">
    <button type="button" class="inputGroup-addon input-group-addon" ng-click="show = !show">
        <span class="icon inputGroup-addon-icon" ng-class="{'icon_eyeClose': show, 'icon_eyeOpen': !show}"></span>
    </button>
</div>

Which copy attributes on input element (including tooltip attribute). If I override tooltip directive that it wrap target element in other element with tooltip I will get

<div class="inputGroup inputGroup_form inputGroup_addonRight input-group-lg">
    <wrapper tooltip="...">
        <input class="inputGroup-input inputGroup-input_form form-control"
               type="{{show ? 'text' : 'password'}}"
               ng-model="model">
    </wrapper>
    <button type="button" class="inputGroup-addon input-group-addon" ng-click="show = !show">
        <span class="icon inputGroup-addon-icon" ng-class="{'icon_eyeClose': show, 'icon_eyeOpen': !show}"></span>
    </button>
</div>

And it break markup (I can't adapt markdown because it use bootstrap classes)

Maybe you will use scope: false and use 'ui.bootstrap' object in parent scope for directive variables. It is normal practice. F.e. Angular set into scope form controller called name from form attribute.

[JustMaier]

@leoduran You are correct, in v11 they both create an isolated scope which causes issues when you try to use both at the same time. While it's possible to create a wrapper for the new scope, it really feels like a downgrade to have to include extra syntax to use both at once...

Also, your example will not work if the trigger for the tooltip is focus instead of mouseenter. Know of any other work-arounds?