Tooltip with position=left on WYSIWYG Editor displays in cen

Konrad Stępień staff commented 5 years ago

Hi @AgentEnder,

Can you provide me with your part of the code?

AgentEnder commented 5 years ago

<mdb-wysiwyg name="descriptionControl" formControlName="descriptionControl" mdbTooltip="Whats happening at your event? How can people find it? Information such as room numbers, directions, and agendas belong here." placement="left"></mdb-wysiwyg>

There is the html, there should not be any relevant scss or ts.

AgentEnder commented 5 years ago

For completeness, here is scss that is applied on the component.

https://pastebin.com/pHD9nSXT

Konrad Stępień staff commented 5 years ago

Hi @AgentEnder,

Can you make a new project and test this code? Because I can't restore your issue.

HTML

<div class="m-5 col-6 mx-auto">
    <mdb-wysiwyg
        name="descriptionControl"
        formControlName="descriptionControl"
        mdbTooltip="Whats happening at your event? How can people find it? Information such as room numbers, directions, and agendas belong here."
        placement="left"
    ></mdb-wysiwyg>
</div>

SCSS

.col {
    padding: 0px;
}

.tags {
    ul {
    margin: 4px 0;
    padding: 0;
    li {
        list-style: none;
        display: inline;
        border-radius: 8px;
        padding: 4px;
        margin: 4px;
        color: white;
    }

    li.separator{
        background-color: #0000;
        border: none;
        color: black;
    }

    li.suggested-tag{
        color:black;
        background-color: #CCC;
        border: 2px #AAA dashed;
    }
    }

    span.cancel {
    cursor: pointer;
    }
}

.modal {
    overflow: auto;
}

.file-hover {
    border: #5154fa dashed 4px;
    border-radius: 8px;
}

.fileChooser * {
    pointer-events: none;
    padding: 2em;
}

.fileChooser input {
    pointer-events: painted;
}

.fileRow {
    margin: 0.25em 1em;
    border-bottom: lightgray solid 2px;
    font-style: italic;

    mdb-icon {
    cursor: pointer;
    }
}

.mdb-date-time {
    mdb-date-picker::ng-deep .mydp,
    mdb-time-picker::ng-deep .tp {
    &,
    input,
    .md-form {
        height: 0;
        width: 0;
    }
    }
}

.wizard-stepper ::ng-deep ul.stepper .step-new-content{
    overflow: visible !important;
}

AgentEnder commented 5 years ago

I've narrowed the cause down to the fact that it is in a modal.The Wysiwyg editor is full width, and the tooltip won't overflow the border, causing it to appear in the middle.

Is this intended?

Konrad Stępień staff commented 5 years ago

Hi @AgentEnder,

I add static modal for my project and I still don't have a problem like yours.

HTML

<button
  type="button"
  mdbBtn
  color="primary"
  class="relative waves-light"
  (click)="basicModal.show()"
  mdbWavesEffect
>
  Launch demo modal
</button>

<div
  mdbModal
  #basicModal="mdbModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myBasicModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close pull-right"
          aria-label="Close"
          (click)="basicModal.hide()"
        >
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <mdb-wysiwyg
          name="descriptionControl"
          formControlName="descriptionControl"
          mdbTooltip="Whats happening at your event? How can people find it? Information such as room numbers, directions, and agendas belong here."
          placement="left"
        ></mdb-wysiwyg>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          mdbBtn
          color="secondary"
          class="waves-light"
          aria-label="Close"
          (click)="basicModal.hide()"
          mdbWavesEffect
        >
          Close
        </button>
        <button
          type="button"
          mdbBtn
          color="primary"
          class="relative waves-light"
          mdbWavesEffect
        >
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>

(SCSS file is the same as in earlier comment) I think you pass styles what block the position of the tooltip to the container.

Can you provide me with more info about your project?