Tooltip and Select Option on wrong position

[Peter-Stern]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Tooltip show directly under the button

Current Behavior

Tooltip is showing on wrong position

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

it is only in dashboard style and only if content is scrolled.

My Code:

`

        <div class="pt-3 row clearfix">
          <?php foreach($content as $row): ?>
            <div class="col-md-4 d-flex">
              <div class="card card-product">
                <div class="card-header card-header-image" data-header-animation="true">
                  <a href="#pablo">
                    <?php if(!file_exists($row['pic_filename'])): ?>
                      <img src="<?= base_url()?><?php echo $this->config->item('domain_public').'images/avatars/avatar0_picture.png'; ?>" alt="photo" class="file-pic">
                    <?php else: ?>
                      <img src="<?= base_url()?><?php echo $row['pic_filename']; ?>" alt="photo" class="file-pic">
                    <?php endif; ?>
                  </a>
                </div>
                <div class="card-body">
                  <div class="card-actions text-center">
                    <button type="button" class="btn btn-danger btn-link fix-broken-card">
                      <i class="material-icons">build</i> Fix Header!
                    </button>
                    <?php if($row['type_id'] == 0): ?>
                      <a type="button" class="btn btn-warning btn-link" rel="tooltip" data-placement="bottom" title="<?php echo $this->lang->line('text_details'); ?>" id="Info" href="<?= base_url('common/info/cards/'.$row['id']);?>">
                        <i class="far fa-folder-open fa-2x"></i>
                      </a>
                    <?php endif; ?>
                    <a type="button" class="btn btn-success btn-link" rel="tooltip" data-placement="bottom" title="<?php echo $this->lang->line('text_email_request'); ?>" href="mailto:<?php echo $this->domain_settings['domain_email'] ?>">
                      <i class="far fa-envelope fa-2x"></i>
                    </a>
                    <?php if(file_exists($row['filename'])): ?>
                      <a type="button" class="btn btn-info btn-link" rel="tooltip" data-placement="bottom" title="<?php echo $this->lang->line('text_info'); ?>" id="Info" href="<?= base_url() ?><?php echo $row['filename']; ?>">
                        <i class="fas fa-info-circle fa-2x"></i>
                      </a>
                    <?php endif; ?>
                  </div>
                  <h4 class="card-title"><strong><?php echo $row['title']; ?></strong></h4>
                  <h5 class="card-title"><?php echo $row['subtitle']; ?></h5>
                  <div class="card-description"><?php echo $row['info']; ?></div>
                </div>
                <div class="card-footer">
                  <div class="price">
                    <p><?php echo $row['footer_left']; ?></p>
                  </div>
                  <div class="stats">
                    <p class="card-category"><?php echo $row['footer_right']; ?></p>
                  </div>
                </div>
              </div>
            </div>
          <?php endforeach;?>
        </div>

`

[Peter-Stern]

Additional info: Example (any card in the second row) https://www.cranio-sacrale-biodynamik.at/common/info/cards/0

[groovemen]

Hello @PeterSt78,

Thank you for using our products, please give us more details about how you want to look/ to be positioned the tooltip. We have checked your project and it looks like the tooltips are positioned well:

All the best, Stefan

[Peter-Stern]

Hello @groovemen

Strange, because I have this correct picture only in the landing page or in the first row on this side. In the second row it looks like:

I am using google chrome: Google Chrome is up to date Version 83.0.4103.61 (Official Build) (64-bit)

All the best, Peter

PS: But I have to scroll to the second row, because of my small monitor (Laptop)

[Peter-Stern]

Maybe you can use this link to scroll lower down https://www.cranio-sacrale-biodynamik.at/common/info/news

[groovemen]

Hello again,

It works fine for every card on your page, even if we shrink the viewport to have a smaller screen, also on this link: https://www.cranio-sacrale-biodynamik.at/common/info/news. Please let us know what Operating System are you using.

Best, Stefan

[Peter-Stern]

Hi Stefan

I am using Windows 10 (1809) and google chrome or firefox (newest version)

Best, Peter

[OsclassEvo]

I agree about this issue. Especially on ultra wide monitors!

[babojamo]

I am having the same issue

the options will not show where the select element located but this case will only occur most of the time when you will load many options like below code.

try to put the select maybe on the middle of the content, then you will see what i mean.

          <div class="form-group select-wizard">
            <label>Job Industry</label>
            <select class="selectpicker" title="Choose">
              <option value=""></option>
              <option data-tokens="Accounting&nbsp;/&nbsp;Finance">Accounting&nbsp;/&nbsp;Finance</option>
              <option data-tokens="Advertising">Advertising</option>
              <option data-tokens="Agriculture&nbsp;/&nbsp;Veterinary">Agriculture&nbsp;/&nbsp;Veterinary</option>
              <option data-tokens="Airline&nbsp;/&nbsp;Airport">Airline&nbsp;/&nbsp;Airport</option>
              <option data-tokens="Arts&nbsp;/&nbsp;Media&nbsp;/&nbsp;Design">Arts&nbsp;/&nbsp;Media&nbsp;/&nbsp;Design
              </option>
              <option data-tokens="Automobile">Automobile</option>
              <option data-tokens="Banking">Banking</option>
              <option data-tokens="Call&nbsp;Center&nbsp;(BPO)">Call&nbsp;Center&nbsp;(BPO)</option>
              <option data-tokens="Computer&nbsp;/&nbsp;Information&nbsp;Technology">
                Computer&nbsp;/&nbsp;Information&nbsp;Technology</option>
              <option data-tokens="Construction&nbsp;">Construction&nbsp;</option>
              <option data-tokens="Consulting">Consulting</option>
              <option data-tokens="Domestic&nbsp;/&nbsp;Caretaker">Domestic&nbsp;/&nbsp;Caretaker</option>
              <option data-tokens="Education&nbsp;/&nbsp;Schools">Education&nbsp;/&nbsp;Schools</option>
              <option data-tokens="Engineering&nbsp;/&nbsp;Architecture">Engineering&nbsp;/&nbsp;Architecture</option>
              <option data-tokens="Food&nbsp;/&nbsp;Restaurant">Food&nbsp;/&nbsp;Restaurant</option>
              <option data-tokens="Government&nbsp;">Government&nbsp;</option>
              <option data-tokens="Healthcare&nbsp;/&nbsp;Medical&nbsp;">Healthcare&nbsp;/&nbsp;Medical&nbsp;</option>
              <option data-tokens="Hotel&nbsp;/&nbsp;Spa&nbsp;/&nbsp;Salon">Hotel&nbsp;/&nbsp;Spa&nbsp;/&nbsp;Salon
              </option>
              <option data-tokens="HR&nbsp;/&nbsp;Recruitment&nbsp;/&nbsp;Training">
                HR&nbsp;/&nbsp;Recruitment&nbsp;/&nbsp;Training</option>
              <option data-tokens="Legal&nbsp;/&nbsp;Documentation">Legal&nbsp;/&nbsp;Documentation</option>
              <option data-tokens="Logistics&nbsp;/&nbsp;Warehousing">Logistics&nbsp;/&nbsp;Warehousing</option>
              <option data-tokens="Manufacturing&nbsp;/&nbsp;Production">Manufacturing&nbsp;/&nbsp;Production</option>
              <option data-tokens="Maritime&nbsp;/&nbsp;Sea-based">Maritime&nbsp;/&nbsp;Sea-based</option>
              <option data-tokens="Non-profit">Non-profit</option>
              <option data-tokens="Property&nbsp;/&nbsp;Real&nbsp;Estate">Property&nbsp;/&nbsp;Real&nbsp;Estate</option>
              <option data-tokens="Printing&nbsp;/&nbsp;Publishing">Printing&nbsp;/&nbsp;Publishing</option>
              <option data-tokens="Purchasing&nbsp;/&nbsp;Buyer&nbsp;/&nbsp;Retail">
                Purchasing&nbsp;/&nbsp;Buyer&nbsp;/&nbsp;Retail</option>
              <option data-tokens="Retail&nbsp;/&nbsp;Merchandise">Retail&nbsp;/&nbsp;Merchandise</option>
              <option data-tokens="Sales&nbsp;/&nbsp;Marketing">Sales&nbsp;/&nbsp;Marketing</option>
              <option data-tokens="Science">Science</option>
              <option data-tokens="Sports&nbsp;/&nbsp;Athletics">Sports&nbsp;/&nbsp;Athletics</option>
              <option data-tokens="Trading">Trading</option>
              <option data-tokens="Travel&nbsp;/&nbsp;Tourism">Travel&nbsp;/&nbsp;Tourism</option>
              <option data-tokens="Others&nbsp;">Others&nbsp;</option>
            </select>
          </div>

Tried: Google, Edge browser OS: Windows 10 Version: 2.1.2

[WafiqSalie]

Got the same issue. My solution was to update popper.js to the latest. Let me know if this helps 🧐😉

[organicwebdevmx]

Got the same issue. My solution was to update popper.js to the latest. Let me know if this helps 🧐😉

thank you bro, I feel really grateful for having an answer from somebody, appreciate it!