Element with popover and tooltip

In a large form, I'm using popovers to display error messages from the validation (I know, not best practice).

Now, I also want to add tooltips to display detailed explanation of the input.

However, using both, the tooltip and the popover directive (and their associated -trigger and -placement directives), the behavior is odd/buggy: Both, tooltip and popover are placed based on the popover-placement directive (ignoring the tooltip-placement) - and display the text provided for the popover.

<button class="btn btn-default"
    popover="Popover" popover-trigger="mouseenter" popover-placement="right" 
    tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
Label</button>

See this plunkr.

Any idea how to make this work?

They actually infact use the same placement function.

From the docs on popover:

The popover directive also supports various default configurations through the $tooltipProvider. See the tooltip section for more information.

Meaning if you had the following code:

<!-- language: lang-js -->

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.options({
    'placement': 'right'
  });
}]);

It would change the default for both tooltips and popovers.

Best I can think of is it have some sort of wrapper around the element so you can do each in turn.

<!-- language: lang-html -->

<button class="btn btn-default sampleBtn"
  popover="Popover" popover-trigger="mouseenter" popover-placement="right">
  <span tooltip="Tooltip" tooltip-trigger="mouseenter"  tooltip-placement="top">
    Tooltip + Popover
  </span>
</button>

Demo in Plunker