Ng-bootstrap with angular 4不显示工具提示

Ng-bootstrap是一个基于Angular的开源UI组件库，用于快速构建现代化的Web应用程序。它提供了丰富的UI组件，包括工具提示（Tooltip）组件。

工具提示是一种常见的用户界面元素，用于在用户将鼠标悬停在某个元素上时显示相关信息。在使用Ng-bootstrap的工具提示组件时，可能会遇到不显示工具提示的问题。

解决这个问题的步骤如下：

1. 确保已正确导入Ng-bootstrap模块和工具提示组件。在Angular的模块文件中，需要导入NgbModule和NgbTooltipModule。

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';

1. 在需要显示工具提示的HTML元素上添加ngbTooltip指令，并设置相应的提示文本。

<button type="button" ngbTooltip="Tooltip text">Hover me</button>

1. 确保在组件的模板中添加了ngbTooltip指令的宿主元素。

<div ngbTooltip="Tooltip text">
  <button type="button">Hover me</button>
</div>

1. 如果工具提示仍然不显示，可能是由于CSS样式的问题。可以尝试在全局的CSS文件或组件的CSS文件中添加以下样式：

.tooltip {
  display: block !important;
}

这样可以强制显示工具提示。

总结起来，要使用Ng-bootstrap的工具提示组件，需要正确导入模块、添加指令和设置提示文本，并确保CSS样式正确。如果仍然无法显示工具提示，可以尝试添加强制显示的CSS样式。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。腾讯云云服务器提供可扩展的计算能力，适用于部署和运行各种Web应用程序。腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库，适用于存储和管理应用程序的数据。

腾讯云云服务器产品介绍链接：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL产品介绍链接：https://cloud.tencent.com/product/cdb_mysql