question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ibm-tooltip-icon component hidden by select component

See original GitHub issue

Detailed description

Describe in detail the issue you’re having.

When I try to use ibm-tooltip-icon component as tooltip, I expect to see it under all other elements. But at this moment it has less priority than ibm-select component.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

ibm-tooltip-icon

What did you expect to happen? What happened instead? What would you like to see changed?

Change z-index

What browser are you working in?

Google Chrome Version 76.0.3809.100 (Official Build) (64-bit)

What version of the Carbon Design System are you using?

"carbon-components": "^10.5.1",
"carbon-components-angular": "^3.15.3",

What offering/product do you work on? Any pressing ship or release dates we should be aware of? no

Steps to reproduce the issue

  1. Create simple table with 2 or more rows.
  2. Add some ibm-select components for all rows and columns.
  3. For one or more ibm-select add tooltip bigger than select element.
 <ibm-tooltip-icon [content]="specificationRow.lessGreater" class="dropdown__middle">
      <div class="dropdown__middle">
         <ibm-select placeholder="Select" (selected)="tableChanged()" [id]="'lessGreater'+i"                                [(ngModel)]="specificationRow.lessGreater">
              <option   *ngFor="let factorValue of factorValues; index as factorValueIndex"     [value]="factorValue">
                                    {{factorValue}}
                </option>
            </ibm-select>
       </div>
 </ibm-tooltip-icon>
  1. Try to see tooltip text in first row (not last).

Additional information

Was redirected to you from angular-components team: https://github.com/IBM/carbon-components-angular/issues/743 image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
asudohcommented, Sep 17, 2019

Quickly tried putting the markup of Carbon select component next to the markup of Carbon tooltip in vanilla dev env and didn’t reproduce the problem. @cal-smith Do you have a template to create a reduced case of Carbon Angular library…? Please let me know if you can reproduce the problem. Thanks!

0reactions
joshblackcommented, Jan 7, 2020

Hi there! 👋 Going to close this out due to inactivity. If you could provide steps to reproduce with a codesandbox then we can re-open this and help out!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tooltip – Carbon Design System
The tooltip component has two states: active and inactive. By default, the tooltip is hidden and inactive. Tooltips are displayed on hover and...
Read more >
Tooltip
Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.
Read more >
Design – IBM Accessibility
What to do ... For drag and drop components, provide the keyboard equivalent for how to select the item, how to move the...
Read more >
Tooltip - Ignite UI for Angular
richTooltip.component.html--> <div class="map"> <igx-icon class="location" ... a tooltip role and the aria-hidden attribute that is automatically updated ...
Read more >
How to add icons and tooltip on react-select component?
You need to add the component as shown below, added it for only one option for demo purpose, you can style it in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found