From 08b101b04170eb2b6d6c572780e7da5bbe8b4bb5 Mon Sep 17 00:00:00 2001 From: drozhzhin-n-e Date: Fri, 4 May 2018 10:34:19 +0300 Subject: [PATCH] v2.0 --- README.md | 30 ++-- src/app/app.component.html | 33 +++- src/app/app.module.ts | 8 +- src/app/tooltip.directive.ts | 160 ------------------- src/app/tooltip/tooltip.component.css | 51 ++++++ src/app/tooltip/tooltip.component.html | 1 + src/app/tooltip/tooltip.component.sass | 51 ++++++ src/app/tooltip/tooltip.component.ts | 106 +++++++++++++ src/app/tooltip/tooltip.directive.ts | 211 +++++++++++++++++++++++++ src/app/tooltip/tooltip.module.ts | 21 +++ src/styles.css | 54 +------ 11 files changed, 486 insertions(+), 240 deletions(-) delete mode 100644 src/app/tooltip.directive.ts create mode 100644 src/app/tooltip/tooltip.component.css create mode 100644 src/app/tooltip/tooltip.component.html create mode 100644 src/app/tooltip/tooltip.component.sass create mode 100644 src/app/tooltip/tooltip.component.ts create mode 100644 src/app/tooltip/tooltip.directive.ts create mode 100644 src/app/tooltip/tooltip.module.ts diff --git a/README.md b/README.md index fa9ce0b..f014a85 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,19 @@ -Angular2 tooltip directive. +Angular tooltip directive. ## Installation -1 Install the npm package. +Install the npm package. npm i ng2-tooltip-directive -2 Import `Ng2Module`: +Import `Ng2Module`: - import { TooltipDirective } from 'ng2-tooltip-directive/components'; + import { TooltipModule } from 'ng2-tooltip-directive'; @NgModule({ - declarations: [ TooltipDirective ] + imports: [ TooltipModule ] }) -3 Add CSS styles - -Example CSS: http://crystalui.org/components/tooltip#css-styles ## Usage @@ -24,16 +21,13 @@ Example CSS: http://crystalui.org/components/tooltip#css-styles ## Properties -| name | type | description | -|------------------|-------------------------------------|---------------------------------------------| -| placement | "top", "bottom", "left", "right" | The position of the tooltip. | -| show-delay | number | The delay in ms before showing the tooltip. | -| hide-delay | number | The delay in ms before removing the tooltip.| -| z-index | number | Z-index of the tooltip. | -| hover | boolean | Set to none to trigger the tooltip with a click. Control the closing time with `hide-delay`. `true` by default| - -## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. +| name | type | default | description | +|------------------|-------------------------------------|---------|---------------------------------------------| +| placement | "top", "bottom", "left", "right" | "top" | The position of the tooltip. | +| show-delay | number | 0 | The delay in ms before showing the tooltip. | +| hide-delay | number | 300 | The delay in ms before removing the tooltip.| +| z-index | number | 0 | Z-index of the tooltip. | +| trigger | "hover", "click" | "hover" | Specifies how the tooltip is triggered. Control the closing time with "hide-delay". | ## Demo http://crystalui.org/components/tooltip \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index fb105b8..34d37bf 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,30 @@

Demo

- - - - - \ No newline at end of file + + + + + + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9257ac2..47d93ea 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,15 +2,15 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import { TooltipDirective } from './tooltip.directive'; +import { TooltipModule } from './tooltip/tooltip.module'; @NgModule({ declarations: [ - AppComponent, - TooltipDirective + AppComponent ], imports: [ - BrowserModule + BrowserModule, + TooltipModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/tooltip.directive.ts b/src/app/tooltip.directive.ts deleted file mode 100644 index 9e7ecff..0000000 --- a/src/app/tooltip.directive.ts +++ /dev/null @@ -1,160 +0,0 @@ -import {Directive, ElementRef, HostListener, Input} from '@angular/core'; - -@Directive({ - selector: '[tooltip]' -}) - -export class TooltipDirective { - - tooltip: any; - elemPosition: any; - tooltipOffset: number = 8; - hideTimeoutId: number; - hideAfterClickTimeoutId: number; - showTimeoutId: number; - - /* tslint:disable:no-input-rename */ - @Input('tooltip') tooltipText = ''; - @Input() placement = 'top'; - @Input() delay = 0; - @Input('show-delay') showDelay = 0; - @Input('hide-delay') hideDelay = 300; - @Input('z-index') zIndex = false; - @Input() hover:boolean = true; - - /* tslint:enable */ - - constructor(private elementRef: ElementRef) { - } - - @HostListener('focusin') - @HostListener('mouseenter') - onMouseEnter() { - if (!this.hover){ - return; - } - - if (this.hideTimeoutId) { - clearTimeout(this.hideTimeoutId); - } - - this.getElemPosition(); - - if (this.tooltip) { - this.tooltip.classList.add('ng-tooltip-show'); - } else { - this.create(); - this.setPosition(); - this.show(); - } - - } - - @HostListener('focusout') - @HostListener('mouseleave') - onMouseLeave() { - if (this.hover){ - this.hide(); - } - } - - @HostListener('click', ['$event']) - onClick(){ - if (this.hideTimeoutId) { - clearTimeout(this.hideAfterClickTimeoutId); - clearTimeout(this.hideTimeoutId); - } - - this.getElemPosition(); - - if (this.tooltip) { - this.tooltip.classList.add('ng-tooltip-show'); - } else { - this.create(); - this.setPosition(); - this.show(); - } - - this.hideAfterClickTimeoutId = window.setTimeout(() => { - this.hide(); - }, this.hideDelay) - } - - getElemPosition() { - this.elemPosition = this.elementRef.nativeElement.getBoundingClientRect(); - } - - create() { - this.showDelay = this.delay || this.showDelay; - this.tooltip = document.createElement('span'); - this.tooltip.className += 'ng-tooltip ng-tooltip-' + this.placement; - this.tooltip.textContent = this.tooltipText; - if (this.zIndex) { - this.tooltip.style.zIndex = this.zIndex; - } - - document.body.appendChild(this.tooltip); - } - - show() { - if (this.showTimeoutId) { - clearTimeout(this.showTimeoutId); - } - - this.showDelay = this.delay || this.showDelay; - this.showTimeoutId = window.setTimeout(() => { - if (this.tooltip) { - this.tooltip.className += ' ng-tooltip-show'; - } - }, this.showDelay); - } - - hide() { - clearTimeout(this.showTimeoutId); - - if (this.hideTimeoutId) { - clearTimeout(this.hideTimeoutId); - } - - if (this.tooltip) { - this.tooltip.classList.remove('ng-tooltip-show'); - - this.hideTimeoutId = window.setTimeout(() => { - this.tooltip.parentNode.removeChild(this.tooltip); - this.tooltip = null; - }, this.hideDelay); - } - } - - setPosition() { - const elemHeight = this.elementRef.nativeElement.offsetHeight; - const elemWidth = this.elementRef.nativeElement.offsetWidth; - const tooltipHeight = this.tooltip.clientHeight; - const tooltipWidth = this.tooltip.offsetWidth; - const scrollY = window.pageYOffset; - - if (this.placement === 'top') { - this.tooltip.style.top = (this.elemPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset) + 'px'; - } - - if (this.placement === 'bottom') { - this.tooltip.style.top = (this.elemPosition.top + scrollY) + elemHeight + this.tooltipOffset + 'px'; - } - - if (this.placement === 'top' || this.placement === 'bottom') { - this.tooltip.style.left = (this.elemPosition.left + elemWidth / 2) - tooltipWidth / 2 + 'px'; - } - - if (this.placement === 'left') { - this.tooltip.style.left = this.elemPosition.left - tooltipWidth - this.tooltipOffset + 'px'; - } - - if (this.placement === 'right') { - this.tooltip.style.left = this.elemPosition.left + elemWidth + this.tooltipOffset + 'px'; - } - - if (this.placement === 'left' || this.placement === 'right') { - this.tooltip.style.top = (this.elemPosition.top + scrollY) + elemHeight / 2 - this.tooltip.clientHeight / 2 + 'px'; - } - } -} diff --git a/src/app/tooltip/tooltip.component.css b/src/app/tooltip/tooltip.component.css new file mode 100644 index 0000000..8eaa9df --- /dev/null +++ b/src/app/tooltip/tooltip.component.css @@ -0,0 +1,51 @@ +:host { + max-width: 200px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 8px; + position: absolute; + z-index: 1000; + display: block; + opacity: 0; + -webkit-transition: opacity 300ms; + -moz-transition: opacity 300ms; + -o-transition: opacity 300ms; + transition: opacity 300ms; } + +:host.tooltip-show { + opacity: 1; } + +:host.tooltip::after { + content: ""; + position: absolute; + border-style: solid; } + +:host.tooltip-top::after { + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-color: black transparent transparent transparent; } + +:host.tooltip-bottom::after { + bottom: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-color: transparent transparent black transparent; } + +:host.tooltip-left::after { + top: 50%; + left: 100%; + margin-top: -5px; + border-width: 5px; + border-color: transparent transparent transparent black; } + +:host.tooltip-right::after { + top: 50%; + right: 100%; + margin-top: -5px; + border-width: 5px; + border-color: transparent black transparent transparent; } diff --git a/src/app/tooltip/tooltip.component.html b/src/app/tooltip/tooltip.component.html new file mode 100644 index 0000000..b26a235 --- /dev/null +++ b/src/app/tooltip/tooltip.component.html @@ -0,0 +1 @@ +{{value}} \ No newline at end of file diff --git a/src/app/tooltip/tooltip.component.sass b/src/app/tooltip/tooltip.component.sass new file mode 100644 index 0000000..a3b7fc7 --- /dev/null +++ b/src/app/tooltip/tooltip.component.sass @@ -0,0 +1,51 @@ +\:host + max-width: 200px + background-color: black + color: #fff + text-align: center + border-radius: 6px + padding: 5px 8px + position: absolute + z-index: 1000 + display: block + opacity: 0 + -webkit-transition: opacity 300ms + -moz-transition: opacity 300ms + -o-transition: opacity 300ms + transition: opacity 300ms + +\:host.tooltip-show + opacity: 1 + +\:host.tooltip::after + content: "" + position: absolute + border-style: solid + +\:host.tooltip-top::after + top: 100% + left: 50% + margin-left: -5px + border-width: 5px + border-color: black transparent transparent transparent + +\:host.tooltip-bottom::after + bottom: 100% + left: 50% + margin-left: -5px + border-width: 5px + border-color: transparent transparent black transparent + +\:host.tooltip-left::after + top: 50% + left: 100% + margin-top: -5px + border-width: 5px + border-color: transparent transparent transparent black + +\:host.tooltip-right::after + top: 50% + right: 100% + margin-top: -5px + border-width: 5px + border-color: transparent black transparent transparent \ No newline at end of file diff --git a/src/app/tooltip/tooltip.component.ts b/src/app/tooltip/tooltip.component.ts new file mode 100644 index 0000000..3bdbe48 --- /dev/null +++ b/src/app/tooltip/tooltip.component.ts @@ -0,0 +1,106 @@ +import {Component, ElementRef, HostListener, HostBinding, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'tooltip', + templateUrl: './tooltip.component.html', + host: {'class': 'tooltip'}, + styleUrls: ['./tooltip.component.css'] +}) + +export class TooltipComponent { + + tooltipOffset: number = 8; + _show:boolean = false; + + /* tslint:disable:no-input-rename */ + + @Input() data: any; + + /* tslint:enable */ + + @HostBinding('style.top') hostStyleTop: string; + @HostBinding('style.left') hostStyleLeft: string; + @HostBinding('style.z-index') hostStyleZIndex: number; + @HostBinding('class.tooltip-show') hostClassShow: boolean; + + @Input() set show (value:boolean) { + if (value){ + this.setPosition(); + } + this._show = this.hostClassShow = value; + } + get show ():boolean { + return this._show; + } + + get placement(){ + return this.data.placement; + } + + get elemetn(){ + return this.data.element; + } + + get elementPosition(){ + return this.data.elementPosition; + } + + get zIndex(){ + return this.data.zIndex; + } + + get value(){ + return this.data.value; + } + + constructor(private elementRef: ElementRef) { + } + + ngOnInit() { + this.setPlacementClass(); + this.setZIndex(); + } + + setPosition():void { + const elemetnHeight = this.elemetn.offsetHeight; + const elemetnWidth = this.elemetn.offsetWidth; + const tooltipHeight = this.elementRef.nativeElement.clientHeight; + const tooltipWidth = this.elementRef.nativeElement.offsetWidth; + const scrollY = window.pageYOffset; + const tooltip = this.elementRef.nativeElement; + + if (this.placement === 'top') { + this.hostStyleTop = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset) + 'px'; + } + + if (this.placement === 'bottom') { + this.hostStyleTop = (this.elementPosition.top + scrollY) + elemetnHeight + this.tooltipOffset + 'px'; + } + + if (this.placement === 'top' || this.placement === 'bottom') { + this.hostStyleLeft = (this.elementPosition.left + elemetnWidth / 2) - tooltipWidth / 2 + 'px'; + } + + if (this.placement === 'left') { + this.hostStyleLeft = this.elementPosition.left - tooltipWidth - this.tooltipOffset + 'px'; + } + + if (this.placement === 'right') { + this.hostStyleLeft = this.elementPosition.left + elemetnWidth + this.tooltipOffset + 'px'; + } + + if (this.placement === 'left' || this.placement === 'right') { + this.hostStyleTop = (this.elementPosition.top + scrollY) + elemetnHeight / 2 - tooltip.clientHeight / 2 + 'px'; + } + } + + setPlacementClass():void { + this.elementRef.nativeElement.classList.add('tooltip-'+this.placement); + } + + setZIndex():void { + if (this.zIndex){ + this.hostStyleZIndex = this.zIndex; + } + } +} diff --git a/src/app/tooltip/tooltip.directive.ts b/src/app/tooltip/tooltip.directive.ts new file mode 100644 index 0000000..2783370 --- /dev/null +++ b/src/app/tooltip/tooltip.directive.ts @@ -0,0 +1,211 @@ +import {Directive, ElementRef, HostListener, Input, ComponentFactoryResolver, EmbeddedViewRef, ApplicationRef, Injector, ComponentRef} from '@angular/core'; +import {TooltipComponent} from './tooltip.component'; + +export interface AdComponent { + data: any; + show: boolean; + close: boolean; +} + +@Directive({ + selector: '[tooltip]' +}) + +export class TooltipDirective { + + tooltipOffset: number = 8; + hideTimeoutId: number; + destroyTimeoutId: number; + hideAfterClickTimeoutId: number; + createTimeoutId: number; + showTimeoutId: number; + componentRef: any; + elementPosition: any; + _showDelay: any = 0; + _hideDelay: number = 300; + + /* tslint:disable:no-input-rename */ + @Input('tooltip') tooltipValue: string = ''; + @Input() placement: string = 'top'; + @Input() delay: number = 0; + @Input('hide-delay-mobile') hideDelayMobile: number = 1500; + @Input('z-index') zIndex: number = 0; + @Input('animation-duration') animationDuration: number = 300; + @Input() trigger: string = 'hover'; + + /* tslint:enable */ + + @Input('show-delay') set showDelay(value: any) { + if (value){ + this._showDelay = value; + } + } + + get showDelay(){ + let result = this.delay || this._showDelay; + + if (this.isMobile()){ + return 0; + } else { + return result; + } + } + + @Input('hide-delay') set hideDelay(value: number) { + if (value){ + this._hideDelay = value; + } + } + + get hideDelay(){ + if (this.isMobile()){ + return (this._hideDelay >= this.hideDelayMobile) ? this._hideDelay : this.hideDelayMobile; + } else { + return this._hideDelay; + } + } + + constructor(private elementRef: ElementRef, + private componentFactoryResolver: ComponentFactoryResolver, + private appRef: ApplicationRef, + private injector: Injector) { + } + + @HostListener('focusin') + @HostListener('mouseenter') + onMouseEnter() { + if (this.trigger != 'hover' || this.isMobile()){ + return; + } + + if (!this.componentRef || this.isTooltipDestroyed) { + this.createTooltip(); + } else if (!this.isTooltipDestroyed) { + this.showTooltip(); + } + } + + @HostListener('focusout') + @HostListener('mouseleave') + onMouseLeave() { + if (this.trigger === 'hover'){ + this.destroyTooltip(); + } + } + + get isTooltipDestroyed() { + return this.componentRef && this.componentRef.hostView.destroyed; + } + + get destroyDelay() { + return Number(this.hideDelay) + Number(this.animationDuration); + } + + @HostListener('click', ['$event']) + onClick(){ + if (this.trigger != 'click' && !this.isMobile()){ + return; + } + + if (!this.componentRef || this.isTooltipDestroyed) { + this.createTooltip(); + } else if (!this.isTooltipDestroyed) { + this.showTooltip(); + } + + this.hideAfterClickTimeoutId = window.setTimeout(() => { + this.destroyTooltip(); + }, 0) + } + + getElementPosition():void { + this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect(); + } + + createTooltip():void { + this.clearTimeouts(); + this.getElementPosition(); + + this.createTimeoutId = window.setTimeout(() => { + this.appendComponentToBody(TooltipComponent); + }, this.showDelay); + + this.showTimeoutId = window.setTimeout(() => { + this.showTooltip(); + }, this.showDelay); + } + + destroyTooltip():void { + this.clearTimeouts(); + + if (!this.isTooltipDestroyed) { + + this.hideTimeoutId = window.setTimeout(() => { + this.hideTooltip(); + }, this.hideDelay); + + this.destroyTimeoutId = window.setTimeout(() => { + if (!this.componentRef || this.isTooltipDestroyed){ + return; + } + + this.appRef.detachView(this.componentRef.hostView); + this.componentRef.destroy(); + //this.clearTimeouts(); + }, this.destroyDelay); + } + } + + showTooltip():void { + this.clearTimeouts(); + (this.componentRef.instance).show = true; + } + + hideTooltip():void { + if (!this.componentRef || this.isTooltipDestroyed){ + return; + } + (this.componentRef.instance).show = false; + } + + appendComponentToBody(component: any, data: any = {}):void { + this.componentRef = this.componentFactoryResolver + .resolveComponentFactory(component) + .create(this.injector); + + (this.componentRef.instance).data = { + value: this.tooltipValue, + placement: this.placement, + element: this.elementRef.nativeElement, + elementPosition: this.elementPosition, + zIndex: this.zIndex + } + this.appRef.attachView(this.componentRef.hostView); + const domElem = (this.componentRef.hostView as EmbeddedViewRef).rootNodes[0] as HTMLElement; + document.body.appendChild(domElem); + } + + clearTimeouts():void { + if (this.createTimeoutId) { + clearTimeout(this.createTimeoutId); + } + + if (this.showTimeoutId) { + clearTimeout(this.showTimeoutId); + } + + if (this.hideTimeoutId) { + clearTimeout(this.hideTimeoutId); + } + + if (this.destroyTimeoutId) { + clearTimeout(this.destroyTimeoutId); + } + } + + isMobile() { + var check = false; + (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor); + return check; + }; +} diff --git a/src/app/tooltip/tooltip.module.ts b/src/app/tooltip/tooltip.module.ts new file mode 100644 index 0000000..d6d62d7 --- /dev/null +++ b/src/app/tooltip/tooltip.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { TooltipDirective } from './tooltip.directive'; +import { TooltipComponent } from './tooltip.component'; + +@NgModule({ + declarations: [ + TooltipDirective, + TooltipComponent + ], + imports: [ + CommonModule + ], + exports: [ + TooltipDirective + ], + entryComponents: [ + TooltipComponent + ] +}) +export class TooltipModule { } diff --git a/src/styles.css b/src/styles.css index 282f13f..e50a47e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,53 +1 @@ -/* You can add global styles to this file, and also import other style files */ -.ng-tooltip { - max-width: 200px; - background-color: black; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px 8px; - position: absolute; - z-index: 1000; - display: block; - opacity: 0; - -webkit-transition: opacity 300ms; - -moz-transition: opacity 300ms; - -o-transition: opacity 300ms; - transition: opacity 300ms; -} -.ng-tooltip-show { - opacity: 1; -} -.ng-tooltip::after { - content: ""; - position: absolute; - border-style: solid; -} -.ng-tooltip-top::after { - top: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-color: black transparent transparent transparent; -} -.ng-tooltip-bottom::after { - bottom: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-color: transparent transparent black transparent; -} -.ng-tooltip-left::after { - top: 50%; - left: 100%; - margin-top: -5px; - border-width: 5px; - border-color: transparent transparent transparent black; -} -.ng-tooltip-right::after { - top: 50%; - right: 100%; - margin-top: -5px; - border-width: 5px; - border-color: transparent black transparent transparent; -} \ No newline at end of file +/* You can add global styles to this file, and also import other style files */ \ No newline at end of file