Tooltip

The *bsTooltip structural directive attaches a hover tooltip to its host element. The directive's value is the placement — 'top', 'bottom', 'start', or 'end' — and the template content can include arbitrary HTML. The demo below shows all four positions.

Basic usage

Just to demonstrate that nothing is being cut-off, we're having position:relative;overflow:hidden on the containers.

  
    
      
        <button [color]="colors.primary">
        
    
      
          Hover me
        
    
      
          <div *bsTooltip="'top'">
        
    
      
            Hello <b>world</b>
        
    
      
          </div>
        
    
      
        </button>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        import { BsTooltipDirective } from '@mintplayer/ng-bootstrap/tooltip';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-tooltip-demo',
        
    
      
          templateUrl: './my-tooltip-demo.component.html',
        
    
      
          imports: [BsTooltipDirective, BsButtonTypeDirective],
        
    
      
        })
        
    
      
        export class MyTooltipDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
        }

Code

The code is available here.