初识DevExtreme，动态的生成多个Tooltip

遇到的问题：

    1、用一个模板生成多个Tooltip时，发现只有最后一个生成了

        解决方法：使用多个模板，静态的写在页面上，或者动态的为页面追加模板

      静态的： <template id="tooltipcardRateRevenue">
                    </template>
                        <template id="tooltipcardRateSoftMargin">
                        </template>
                        <template id="tooltipcardRateWarranty">
                        </template>
                          <template id="tooltipcardRateService"

                        </template>

  动态的： if ($('#tooltip' + field).length==0)
        $("body").append('<template id="tooltip' + field + '"></template>');

 2、修改颜色，原生参数没有，只有通过修改原生样式

              *.dx-popup-wrapper > .dx-overlay-content {
                    background-color: lightgray;
                    color: black;
                    font-weight: 700 !important;
                }
                .dx-tooltip-wrapper.dx-popover-wrapper .dx-popover-arrow::after {
                    background-color: lightgray;
                  }

3、原生参数没有没有透明度设置参数，只有在动画里面修改

最后js代码如下：

                     createToolTip: function (field) {
        if ($('#tooltip' + field).length==0)
        $("body").append('<template id="tooltip' + field + '"></template>');
        $("#tooltip" + field).dxTooltip({
            target:'#'+field,
            showEvent: 'mouseenter',
            hideEvent: 'mouseleave',
            hideOnOutsideClick: false,
            position: 'top',
            animation: {
                show: {
                    type: 'pop',
                    from: {
                        scale: 0.1,
                        opacity: 0,
                    },
                    to: {
                        opacity: 0.9,
                        scale: 1,
                    },
                },
                hide: {
                    type: 'pop',
                    from: {
                        scale: 1,
                        opacity: 0.9,
                    },
                    to: {
                        opacity: 0,
                        scale: 0.1,
                    },
                },
            },
            contentTemplate(data) {
                data.html('<div style="font-weight:bolder;font-size:16px"> % change of <br/>' + storeDash.lastParam.crtName + ' vs ' + storeDash.lastParam.lspName+'</div>');
            },
        });

       /* $("#" + $('#' + field).attr("aria-describedby")).css("background-color", "lightgray");*/
    }