How to change Title attribute CSS

Tags: #<Tag:0x00007f8b1cf05650>
#1

I have the Title attribute in a span, when I hover it displays the title, but I needed to change the title’s css, I’ve tried all ways but it doesn’t work.

Captura%20de%20tela%20de%202022-08-04%2011-02-27
Captura de tela de 2022-08-04 11-02-27.png782×322 32 KB

I implemented this code and it didn’t work:
:host ::ng-deep #span-tooltip[title]:hover::after{
background-color: red !important;
}

#2

Hi @sidney.silva

Can you please send us a code demo showing your issue?

#3

html:

<ng-template #colName let-value="value" let-td="td" let-row="row">
 <span id="span-tooltip"
 class="cell-premise-name"
 #nameContainer
>
{{ value }}
 </span>

   {{ formatCell(td, nameContainer, row) }}
 </ng-template>

Typescript:

   formatCell(td: HTMLTableDataCellElement, span: HTMLSpanElement, row: number) {
if(span.innerHTML.length > 25){
  span.setAttribute('title',span.innerHTML);
}
}

CSS:

:host ::ng-deep #span-tooltip[title]:hover::after{
 background-color: red !important;
}
#4

Hi @sidney.silva

Generally, this question does not relate to the Handsontable API, more to general rules of HTML/CSS. However, if something works outside Handsontable and wouldn’t work when applied in the table that’s a case for us.

Here https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag I found a similar topic on StackOverflow for styling title.

#5

Hello @aleksandra_budnik
It’s working outside Handslontable, but when I use it inside handsontable it doesn’t work.

I even used this stackoverflow solution and it didn’t work in handsontable.

#6

In my case it shows 2 titles, the default way and the new one

43

One one (yellow) is shown on the hover and default one is shown with a slight delay (as most of the title elements). Demo for tests https://jsfiddle.net/9nsyrcv4/

#7

I’m closing this topic as there are no further questions.

#8