ngpopover is not working

[macin40]

Issue type

**I'm submitting popover bug

Issue description

Current behavior: Hover text is not appearing. These are the states

Expected behavior:

Steps to reproduce: <button class="btn btn-outline-primary" nbPopover="Hover Mode" nbPopoverMode="hover"> Hover Mode </button> just place the html code anywhere on the html page

Other information:

npm, node, OS, Browser

Node, npm: `node 8.11.3` and `npm 5.6.0`
OS:  macOS High Sierra
Browser: Chrome

Angular, Nebular

{
  "name": "craft",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "^6.0.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^6.0.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@nebular/theme": "^2.0.0-rc.8",
    "angular-highcharts": "^6.0.0",
    "angular2-csv2json": "^1.0.0",
    "angular2-toaster": "^6.0.0",
    "angular5-data-table": "^1.0.3",
    "apollo-angular": "^1.1.0",
    "apollo-angular-link-http": "^1.1.0",
    "apollo-cache-inmemory": "^1.2.1",
    "apollo-client": "^2.3.1",
    "apollo-upload-client": "^8.0.0",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "highcharts": "^6.1.0",
    "nebular-icons": "^1.0.6",
    "ng2-smart-table": "^1.3.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/highcharts": "^5.0.22",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "^5.9.1",
    "typescript": "^2.5.3"
  }
}

[nnixaa]

Hi @macin40, are there any errors? Could you create a reproducible example?

[prashantkaushik-cipl]

I am getting this error

@nnixaa

[nnixaa]

@Tibing could you check?

[Tibing]

Hi @prashantkaushik-cipl, I've created stackblitz. So, are you sure you've registered nebular styles correctly? Are you sure you're using popover inside <nb-layout></nb-layout>?

[nnixaa]

Closing as answered.

[nikita-fuchs]

Wrapping the popover, like e.g.

  <nb-card-header>
    <nb-layout>
    Preview  &nbsp; <nb-icon class="centerIcon" [icon]="'question-mark-circle-outline'" pack="eva" nbPopover="Pick an iconic symbol for your item, e.g. XZY " nbPopoverTrigger="hover" nbPopoverPlacement="right"></nb-icon>
  </nb-layout>

screws up the whole UI, isn't it possible to just make it work somehow? I'm using the ngx admin template, and inside https://github.com/akveo/ngx-admin/blob/master/src/app/pages/forms/form-layouts/form-layouts.component.html I can make use of popovers just like

<nb-icon class="centerIcon" [icon]="'question-mark-circle-outline'" pack="eva" nbPopover="Enter a Name for your item. E.g. 'Turbo' " nbPopoverTrigger="hover" nbPopoverPlacement="right"></nb-icon>

without the need for <nb-layout>.

Edit: Nevermind, no need for <nb-layout> . Just had to import the popover module, didn't get a warning that it was missing. For everyone else reading: Open the module where the component is defined in, and

import { NbPopoverModule } from '@nebular/theme'; and

@NgModule({
  imports: [
    ...
    NbPopoverModule,
    ...
  ],