Nebular: Tooltip stay visible when the component attached to is removed

[HernanEscola]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Adding a tooltip to a button that submit a form, when this form dissapear, the tooltip stay alive and visible in the location where the button was

Current behavior:
When an element with a tooltip attached is removed, the tooltip stay visible. It happens with popover as well

Expected behavior:
When an element with a tooltip attached is removed, the tooltip should dissapear.

Steps to reproduce:
The easy steps to reproduce are:

1. Create an element. Add any tooltip.
2. With a browser, inspect the element that have a tooltip.
3. Put the mouse pointer over the element to show tooltip.
4. Press "delete" key to remove the element.

It happen with the demos on nebular documentation

Angular, Nebular

"dependencies": {
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.3",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.3",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/router": "^7.0.3",
    "@nebular/bootstrap": "3.1.0",
    "@nebular/security": "3.1.0",
    "@nebular/theme": "3.1.0",
    "@ng-dynamic-forms/core": "^7.0.1",
    "@ng-dynamic-forms/ui-bootstrap": "^7.0.1",
    "bootstrap": "4.0.0",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "eva-icons": "^1.1.0",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "nebular-icons": "1.1.0",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "rxjs": "6.3.0",
    "rxjs-compat": "6.3.0",
    "socicon": "3.0.5",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.26",
    "@agm/core": "^1.0.0-beta.5",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "angular2-text-mask": "^8.0.4",
    "ngx-bootstrap": "^3.1.1"
  },

[nnixaa]

Unfortunately, we won't be able (and there is no need to) track such behavior. Tooltip existence is tracked by Angular lifecycle hooks so that we can remove it on ngOnDestroy. Generally, it is not a very good idea to manipulate with DOM directly bypassing Angular API.

[HernanEscola]

@nnixaa No, it doesn't work with the angulars lifecycle neither. If you have a component that inside have other component with a button that have a tooltip attached to it and when clicked it navigate to other route (destroying the parent component or hidden it), the tooltip stay vissible and sometiimes change the location too.

[shreenil]

Experiencing the same behaviour. Any updates on this @nnixaa @HernanEscola ??

[nnixaa]

Can someone post a reproducible stackblitz? This one can be used as a starter https://stackblitz.com/github/akveo/nebular-seed

[GreedyA1]

@nnixaa Here is the reproduction for the problem. Couldn't find any other related issues on this topic on Github. Can we reopen this issue?

https://stackblitz.com/edit/github-tti3eb

[suppadeliux]

Up! I have exactly the same issue.
In my case I use the tooltip inside a nb-select, and whenever I click outside the options of the select, the options hide as expected, but the tooltip stays at the left top of my screen!

[backciro]

There's the problem also in nebular 5.0.

My current workaround:

Not a real solution but i made my own tooltip using like this.
adjust margin-top for distance from item.

>component.html

<div class="myTooltip">
    <span class="myTooltipText"> <!--Tooltip content --> </span>
    ...
</div>

>component.scss

.myTooltip {
  position: relative;
  display: inline-block;
}

.myTooltip .myTooltipText {
  opacity: 0;
  visibility: hidden;
  font-size: 12px;
  width: 400px;
  pointer-events: none;
  border: 1px solid;
  padding: 0 15px;
  background: #b2d3e4;
  color: #00639e;
  text-align: justify;
  border-radius: 6px;
  margin-top: -70px;
  position: fixed;
  z-index: 999;
  overflow: visible;
  min-height: 54px;
  vertical-align: middle;
  display: inline-flex;
  transition: opacity .1s ease-in-out;
  -webkit-transition: opacity .1s ease-in-out;
}

.myTooltip .myTooltipText::after {
  content: " ";
  left: 10%;
  bottom: -10px;
  overflow: visible;
  font-size: 12px;
  width: 12px;
  color: #00639e;
  z-index: 99999;
  position: absolute;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #b2d3e4 transparent transparent transparent;
}

.myTooltip:hover .myTooltipText {
  visibility: visible;
  opacity: 1;
}