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:



    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.



    <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][Plunker]

![screenshot][screenshot]

[Plunker]: http://plnkr.co/edit/RaUnUeruZLEGKMIBMSQZ?p=preview
[screenshot]: http://i.imgur.com/NqMSrku.png

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](http://plnkr.co/edit/gxYpvDKUw43pC7nE5aKa?p=preview).

Any idea how to make this work?


Element with popover and tooltip

Well the solution in the problem you linked to was to use a linear gradient like this:

    .css-class-to-highlight a {
       background: linear-gradient(red 50%, green 50%);
    }

I'm not sure what it buys you, but you can use a [`linear-gradient()`][1] and specify the angle in degrees like this:



    div[datepicker] table td button {
       background: linear-gradient(-45deg, #4AD34A 50%, #009EFF 50%) !important;
    }

You've asked for a CSS only solution that will only affect the visual presentation of the data.  If that's what you want you're all set.  If you wanted to take different actions based each quadrant, you'd need a more sophisticated setup.

### Demo in Stack Snippets





    var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
    app.controller('ui.bootstrap.ctrl', function ($scope) {
       $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
      };
    });



    div[datepicker] table td button {
       background: linear-gradient(-45deg, #4AD34A 50%, #009EFF 50%) !important;
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>

    <div ng-app="ui.bootstrap.module" >
      <div ng-controller="ui.bootstrap.ctrl">

        <div class="row">
          <div class="col-xs-6">
            <p class="input-group">
              <input type="text" class="form-control" 
                     datepicker-popup
                     ng-model="dt" 
                     is-open="opened" 
                     ng-required="true" 
                     close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default"
                        ng-click="open($event)">
                  <i class="glyphicon glyphicon-calendar"></i>
                </button>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>




[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

I have a question that is similar to this question on [jQuery datepicker show half day blocked][1]

I need to style a date field diagonally. 

For example, in booking calendars when people are leaving in the morning or coming at the afternoon.

  [1]: http://javahow.net/questions/25136508/jquery-date-picker-show-half-day-blocked



Angular UI Bootstrap datepicker half date coloring

You'll want to have the dropdown datepicker appear as part of the regular document flow, that way it will occupy space and the tab picker will automatically make room for it.  It doesn't do that currently because it uses `.dropdown-menu`, to which Bootstrap adds [`position: absolute;`][1]

Just override like this:

    .dropdown-menu[datepicker-popup-wrap] {
        position: static;
    }

There are some other stylistic things you can do, but that is the basic principle.

[**Demo in jsFiddle**][2]

[1]: https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less#L32
[2]: http://jsfiddle.net/KyleMit/m3y9cfm7/2/

I have a modal window with angular-material tabs and a ui-bootstrap datepicker. When I open datepicker, the text field moves up, and I cannot access either the datepicker or the field.

[**Here's a demo in jsFiddle**][1]

Here's my code:




    var app = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
    .controller('myController', function ($scope, $modal) {
      $scope.showModal = function () {
        var modalInstance;
        modalInstance = $modal.open({
          templateUrl: "addNew.html",
          controller: 'myController2',
          size: 'lg'
        });
      };
      $scope.showModal();
    })
    .controller('myController2', function ($scope, $modal) {
      $scope.datepickers = {
        start: false
      }

      $scope.openDatepicker = function ($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.datepickers[which] = true;
      };

      $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
      };

      $scope.dateFormat = 'mediumDate';
    });




    <div ng-app="myApp">
      <div ng-controller="myController">
        <script type="text/ng-template" id="addNew.html">
          <div class="modal-body">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Add</h3>
              </div>
              <div class="panel-body">
                <md-tabs md-dynamic-height md-border-bottom>
                  <md-tab label="date">
                    <div class="form-horizontal">
                      <div class="row">
                        <div class="col-md-6">
                          <div class="row form-group">
                            <label for="dateStart" class="col-sm-2 col-md-4 control-label">
                              Date&nbsp;Start
                            </label>
                            <div class="col-sm-10 col-md-8">
                              <div class="input-group ui-datepicker">
                                <input type="text"
                                       class="form-control"
                                       name="dateStart"
                                       id="dateStart"
                                       datepicker-popup="{{dateFormat}}"
                                       ng-model="campaign.dateStart"
                                       is-open="datepickers.start"
                                       datepicker-options="dateOptions"
                                       ng-required="true"
                                       ng-click="openDatepicker($event, 'start')"
                                       close-text="Close"/>
                                <span class="input-group-addon" ng-click="openDatepicker($event, 'start')">
                                  <i class="glyphicon glyphicon-calendar"></i>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </md-tab>
                  <md-tab label="other tabs"></md-tab>
                  <md-tab label="other tabs"></md-tab>
                  <md-tab label="other tabs"></md-tab>
                  <md-tab label="other tabs"></md-tab>
                </md-tabs>
              </div>
            </div>
          </div>
        </script>
      </div>
    </div>


I used a css trick to [add the scroll bar in this fiddle][2], but it's not very neat. So I was wondering if there is a way to expand the tab height when the datepicker is opened or the datepicker is shown over a modal window like the select window opens.


  [1]: http://jsfiddle.net/salalaslam/m3y9cfm7
  [2]: http://jsfiddle.net/salalaslam/m3y9cfm7/1/