0

我在 Angular 中将tippy.js 与 Cytoscape.js 一起使用，并且需要与节点颜色匹配的工具提示。我可以从节点数据中访问此颜色，但我不知道如何将其传递给tippy，因为tippy 的主题仅在SCSS 中完成，我无法为图表中存在的100 种颜色设置单独的主题。

在 .ts 文件中创建工具提示的代码

var tip = tippy(dummyDomEle, {
    getReferenceClientRect: ref.getBoundingClientRect,
    trigger: 'manual',
    popperOptions: {  //to resolve out of bounds error
        strategy: 'fixed',
        modifiers: [
            {
              name: 'flip',
              options: {
                fallbackPlacements: ['bottom', 'right', 'left', 'top'],
                flipDuration: 0,
                boundary: wrapper,
              },
            },
            {
              name: "hide",
              options: { enabled: true }
            },
            {
              name: 'preventOverflow',
              options: {
                tether: false, // true by default
                mainAxis:true,
                altAxis: true,
                boundary: wrapper,
                rootBoundary: 'document'
              },
            },
        ],
    },
    content: () => { 
    var div = document.createElement('div');
    div.innerHTML = text;
        return div;
    },
    allowHTML: true,
    plugins: [sticky],
    theme: "node-tooltip",
    zIndex: 2,
    placement: 'bottom',
    hideOnClick: false, 
    sticky: true, 
    interactive: false, 
    animation: false, 
    moveTransition: 'transform 0.2s ease-out', 
    appendTo: wrapper
});

.scss 文件中当前主题的代码

.tippy-box[data-theme~="node-tooltip"] {
    // background-color: ""; //Need to put color here dynamically
    border-color: black;
    color: white;
    font-size: 12px;
}
4

0 回答 0