#angular #sass #tippyjs
Вопрос:
Я использую tippy.js с Cytoscape.js в Angular и имеют требование к подсказкам, соответствующим цветам узлов. У меня есть доступ к этому цвету из данных узла, но я не знаю, как передать это типпи, так как тематика для типпи выполняется только в 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: () =gt; { 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; }