tooltip was hidden by pinned column

Question

visions:

angular: 2.4.9
ag-grid-angular: 16.0.0
bootstrap: 4.0.0-alpha.5
ngx-bootstrap: 1.6.6

I use ag-grid to frozen the first two column of table, and then overwrite tooltip width which is longer than the second column. Then it looks like this:

enter image description here

the right of tooltip was covered by columns.

I tried to set

z-index: 99999 !import

but not work. Does anyone know?

can you reproduce this in plunk? – Paritosh Mar 01 '18 at 10:03 — Paritosh, Mar 01 '18 at 10:03

score 1 · Accepted Answer · answered Mar 03 '18 at 02:39

1

Append tooltip to body.

<button type="button" class="btn btn-success"
            tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            container="body">

Add container="body" attribute with the tooltip.

answered Mar 03 '18 at 02:39

Raghu Ram

181
5

koolhuman · Answer 2 · 2018-03-05T21:52:31.893

0

If you are just looking to change the width by a custom class then you can override the styles using below code in your CSS file. I have changed your plunker

https://plnkr.co/edit/hbrjgaKArGx34rVRzNOH?p=preview

Example

.tooltip-inner {max-width: 205px;}

edited Mar 05 '18 at 21:52

answered Mar 05 '18 at 21:39

koolhuman

1,581
15
25

@Y.Ping - did you check my plunker link? – koolhuman Mar 07 '18 at 04:34
yes, I am sure. You removed /deep/, so the default style can not work either. – Y. Ping Mar 07 '18 at 10:09

tooltip was hidden by pinned column

2 Answers2