CODEWITHSUNDEEP
htmlcssangularjs
jrkt
jrkt

Reputation: 2715

Angular Material UI Tooltip showing behind div

I am building a todo application with Angular2 and AngularFire2 with Material UI styling. On part of the application, the material tooltips are showing up behind a div.

<div class="view">
  <input class="toggle" type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.completed">
  <input type="text" class="todoEditable" [class.important]="todo.important"
         (keyup.enter)="updateTitle(todo, $event)" value="{{todo.title}}">
  <div class="todoActions">
    <img class="todoAction tooltip" md-tooltip="Alert" tooltip-position="below"
         src="../../assets/img/add_alert.svg"
         (click)="toggleModal(todo, 'addAlertModal')"/>
    <img class="todoAction tooltip" md-tooltip="Photo" tooltip-position="below"
         src="../../assets/img/insert_photo.svg"
         (click)="toggleModal(todo, 'addPhotoModal')"/>
    <img class="todoAction tooltip" md-tooltip="Location" tooltip-position="below"
         src="../../assets/img/location.svg"
         (click)="toggleModal(todo, 'addDescriptionModal')"/>
    <img class="todoAction tooltip" md-tooltip="Remove" tooltip-position="below"
         src="../../assets/img/remove.svg" (click)="removeTodo(todo)"/>
  </div>
</div>
<div class="todoDetails"> <!-- *ngIf="todo.showDetails" -->
  <div class="todoDetailsDescription">
      <textarea placeholder="Add Description..." class="descriptionTextArea" [(ngModel)]="todo.description"
                (keyup.enter)="updateDescription(todo)">
      </textarea>
  </div>
  <div *ngIf="todo.photoUrl" class="todoDetailsPhoto">
    <img src="{{todo.photoUrl}}"/>
  </div>
</div>


    .todoDetails {
        z-index: -1 !important;
    }

    .todoDetailsDescription {
        width: 80%;
        height: 85px;
        margin: 4% auto;
        text-align: center;
        z-index: -1 !important;
    }

    .todoDescription textarea {
        font-size: 1em;
        margin: 1% 3%;
        min-width: 90%;
        max-width: 90%;
        padding: 1%;
        min-height: 65px;
        max-height: 65px;
        border: none;
        background: #f2f2f2;
        z-index: -1 !important;
    }

    .todoActions {
        float: right;
        display: flex;
        flex-direction: row;
        width: 210px;
        z-index: 10000 !important;
    }

    .todoAction {
        display: none;
        width: 30px;
        height: 30px;
        cursor: pointer;
        margin: 10px;
        transition: color 0.2s ease-out;
        z-index: 10000 !important;
    }

Screencapture

enter image description here

So, as you can see, the img tags in the todoActions div that are assigned tooltips show behind the todoDetails div. How can I can my tooltips to show in front of the todoDetails/todoDescription divs?

Upvotes: 1

Views: 5620

Answers (1)

sergio0983
sergio0983

Reputation: 1278

z-index is relative to sibling elements, so, giving a high z-index to .todoActions won't help you if its parent container (.view) is behind .todoDetails.

Without viewing the full code working, can't say 100%, but I think that the following rules will work:

.view {
  position:relative; z-index:1;
}
.todoDetails {
  position:relative; 
  z-index:-1 !important;
}

Upvotes: 1

Related Questions