Tooltip with position=left on WYSIWYG Editor displays in cen


Topic: Tooltip with position=left on WYSIWYG Editor displays in center of textarea

AgentEnder asked 5 years ago

Expected behavior

Tooltip displays to the left of the editor

Actual behavior

Tooltip displays in the middle of the editor

Resources (screenshots, code snippets etc.)

enter image description here


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;
}

Example


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.

Example

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?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.0
  • Device: Desktop PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No