CODEWITHSUNDEEP
angulartwitter-bootstrap-3ng-bootstrap
Roger Johansson
Roger Johansson

Reputation: 23214

ngbPopover not showing up

I'm trying to use the popover from ng-bootstrap (https://ng-bootstrap.github.io/#/components/popover) in my Angular2/Typescript app.

I don't even know how to state the question as there are no errors and yet, the popover is not showing.

this is the code that I have:

 <div ngbPopover="You see, I show up on hover!" 
      placement="top" triggers="mouseenter:mouseleave" title="Pop title"></div>

And this is my app config:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        DependenciesComponent,
        TraceChartComponent
    ],
    imports: [
       NgbModule, 
    ...

Which is pretty much taken from their example site.

I'm fairly sure I've got all the required javascripts included as the ngbTooltip do work.

Is there anything else I need to do that I am missing here?

Upvotes: 2

Views: 12527

Answers (3)

Manu
Manu

Reputation: 1085

If you are not using Bootstrap 4 or 3, you can simply override the default css of the ngb-popover-window tag and set the css display property to block !important in the file style.css like this:

   ngb-popover-window {
       position: absolute;
       width: auto !important;
       display: block !important;
       background-color: #fafafa !important;
       border: 1px solid #fafafa !important;
       max-width: none !important;
   }

And it should work.

Upvotes: 3

bReChThOu
bReChThOu

Reputation: 46

This was resolved in the latest version ng-bootstrap (1.0.0-alpha.18).

running

npm update @ng-bootstrap/ng-bootstrap

should solve your issue.

https://github.com/ng-bootstrap/ng-bootstrap/commit/60fd5d954cff7aa982dd328845689c039251ffe2

Upvotes: 3

user6949046
user6949046

Reputation: 1

In the chrome dev console look at the element which is rendering ngb-popup, click on it and see the relevant css for that. You will be able to see the popup once you un-check the display:none style in .popup. Hence, its a css issue

PS. remove triggers="mouseenter:mouseleave" so that default trigger is set to muse click so that you are able to inspect element properly

Upvotes: 0

Related Questions