Tooltips in Spotfire are great for showing insights on mouse over. We use them a lot for showing information which should appear only when we need. But what if you feel that their look and feel is not matching with you theme ?
Question here is - How to add Style to tooltips ? 🤔🤔
Answer is, below code in a HTML TextArea -
<style id="AlienBox">
.sf-tooltip {
background-color:chocolate !important;
color: white !important;
border: 2px solid white!important;
border-radius: 8px 0px 8px 0px !important;
font-variant: petite-caps;
font-style: italic;
font-weight: lighter;
font-size: x-small;
}
</style>
If you are victim of HTML Sanitization issue, use JavaScript below -
if(!$('#AlienBox').length){
$('body').append($(`<style id="AlienBox">
.sf-tooltip {
background-color:chocolate !important;
color: white !important;
border: 2px solid white!important;
border-radius: 8px 0px 8px 0px !important;
font-variant: petite-caps;
font-style: italic;
font-weight: lighter;
font-size: x-small;
}
</style>`, {
id: 'AlienBox'
}));
}
This is what I was able to achieve so far -