（Angular7 ng-Zorro UI框架）Tooltip文字提示的样式设置

（Angular7 ng-Zorro UI框架）Tooltip文字提示的样式设置

之前遇到这种问题 网上查找了很多相关信息 最后总结了一下 

我的代码 是将这个输入框和对应的文字提示 写成了一个组件

科普：

首先 我们要观察提示气泡 UI组件的内部结构   nzMouseLeaveDelay="20" （延迟提示消失时间） 使用这个属性 可以观测到 

nzPlacement="bottom" （提示文字框中间的箭头指向）

nzOverlayClassName="" 添加自定义样式类

在我这里有个奇怪现象 不设置nzMouseLeaveDelay属性  nzPlacement属性就不生效 因为延迟消失时间默认是0.1秒 我这里给它设置成0.2秒

我用的pre标签保留文本格式  你们可以不用这个标签哈

酱 代码奉上

import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChange } from '@angular/core';

import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({

    selector:'nz-tootip-template',

    template:`

    <textarea placeholder="IP范围" nz-input [(ngModel)]="inputValue" nzPlacement="bottom" nzMouseLeaveDelay="0.2" nz-tooltip [nzTitle]="titleTemte" nzOverlayClassName="tooltip-pree" ></textarea>

      <ng-template #titleTemte>

<pre>

IP查询范围支持的方式如下:

 1.IPv4:

  单线IP节点,如192.168.1.1

  通配符查询,如192.168.1.*,192.168.*.1

  IP范围查询,如10.0.0.1-10或10.1.1-10.2

  IP网段查询,如192.168.1.1/18

  匹配混合模式,如192.168.1-10.*,192.168-169.*.*

 2.IPv6:

  范围查询,如abcd::eeee-abcd::ffff

  单节点查询,如abcd::eeee

多个IP之间用英文逗号/空格或者换行分离

</pre>

      </ng-template>

    `,

    styles:[

      `

     ::ng-deep .tooltip-pree {

        min-width:330px !important;

        div {

          min-width:330px !important;

          div {

            &:first-child {

              width:330px !important;

            }

            &:last-child {

              min-width:330px !important;

              pre {

                width:100%;

                font-size:12px;

                color:#efefef;

              }

            }

          }

        }

      }

      `

    ]

  })

  export class NzTootipTemplateComponent{

    @Output() tooltipmsg: any = new EventEmitter<any>();

    inputValue:any;

    ngOnInit(){

      this.tooltipmsg = this.inputValue

    }

  }

页面效果图 奉上 酱

style 里改变了对应的提示框宽度

tooltip-pree 是自定义属性 

改变提示文字的重点 在于覆盖掉原UI组件的对应的样式  也就是style

然后参照对应的文字提示层级目录 设置想要的宽度 这样就大功告成啦

希望这篇文章可以帮到需要的宝宝们^_^