Angular5+Ionic3中ionic-tooltips注入HTML内容的实现咨询

Hey there! I’ve run into this exact issue before with ionic-tooltips—pure text works great, but custom HTML needs a slightly different approach than just passing a string or messing with ng-template the wrong way. Let’s get your custom call popup working step by step:

Step 1: Define Your Custom Tooltip Template #

First, create an ng-template in your component’s HTML file with your desired HTML structure. Don’t wrap it in a string—write it directly as template markup:

<ng-template #customCallTooltip>
  <div class="callpopup">
    <h5>Aditi Kumar <span>+** *******</span></h5>
    <div class="icon-call">
      <a href="tel:+** ********">
        <ion-icon ios="ios-call" md="ios-call"></ion-icon>
      </a>
    </div>
  </div>
</ng-template>

Step 2: Update Your Button to Use the Template #

Instead of using the tooltip attribute for plain text, use the [tooltipTemplate] input to bind to your template reference. Also, note that you don’t need [attr.] prefixes for the component’s input properties (like arrow, event, duration)—those are direct inputs from the ionic-tooltips component:

<button 
  ion-button 
  mode="ios" 
  [tooltipTemplate]="customCallTooltip"
  positionH="right"
  [arrow]="showArrow"
  [event]="tooltipEvent"
  [duration]="duration"
>
  Right
</button>

Step 3: Reference the Template in Your Component Class #

Add a ViewChild decorator to your component’s TypeScript file to grab the template reference and make it available for binding:

import { Component, ViewChild, TemplateRef } from '@angular/core';

// ... other existing imports

@Component({
  selector: 'your-page-selector',
  templateUrl: 'your-page.html',
  styleUrls: ['your-page.scss']
})
export class YourPageComponent {
  tooltipEvent: 'click' | 'press' = 'click';
  showArrow: boolean = true;
  duration: number = 10000;

  // Reference the custom tooltip template
  @ViewChild('customCallTooltip') customCallTooltip: TemplateRef<any>;

  // ... other component logic
}

Step 4: Add Your Custom Styles #

Make sure your .callpopup and .icon-call styles are defined either in your component’s SCSS file or the global app.scss file so they apply to the tooltip content:

.callpopup {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  h5 {
    margin: 0 0 8px;
    font-size: 14px;
    span {
      color: #666;
      margin-left: 8px;
    }
  }
  .icon-call {
    a {
      color: #28a745;
      ion-icon {
        font-size: 20px;
      }
    }
  }
}

Why Your Previous Attempts Didn’t Work #

The tooltip attribute only accepts plain text strings—any HTML passed there gets escaped instead of rendered. The ionic-tooltips component is designed to use tooltipTemplate with a TemplateRef when you need custom HTML content, which lets Angular render the markup properly.

Give these steps a try, and your custom call popup tooltip should work perfectly!

内容的提问来源于stack exchange，提问作者Shilpi Jaiswal