Tooltip on action buttons

[dandro32]

Hello I've like to add tooltips using angular-material too action buttons. However these seems not to be working. There is a problem, probably with sanitizing html. In console i have "WARNING: sanitizing HTML stripped" Would be great for any help or assists. Thank you

actions: {
            add: false,
            columnTitle: "Opcje",
            custom: [
                {
                    name: 'view',
                    title: '<i mdTooltip="Tooltip!" class="fa fa-info-circle fa-lg bigger-space"></i>'
                }
            ]
        },
        edit:  {
            confirmSave: true,
            editButtonContent: '<i class="fa fa-2x fa-pencil"></i>',
            saveButtonContent: '<i class="fa fa-2x fa-save"></i>',
            cancelButtonContent: '<i class="fa fa-2x fa-window-close"></i>',
        } ,
        delete:  {
            confirmDelete: true,
            deleteButtonContent: '<i mdTooltip="Usuń" class="fa fa-2x fa-trash"></i>'
        } ,

[Sean-Brown]

You need to inject the angular DomSanitizer and use the bypassSecurityTrustHtml method. That gets around the "sanitizing HTML stripped" error, although I'm noticing that the smart table still doesn't display bootstrap components such as the tooltip, even though the tooltip is in the DOM.

[dandro32]

@Sean-Brown Thank you for confirmation. I tried with sanitizing, also tried with

'<i [mdTooltip]="'Tooltip!'" class="fa fa-info-circle fa-lg bigger-space"></i>

or with

     title: this.sanitizer.bypassSecurityTrustHtml('<i [mdTooltip]=' + this.tooltip+ '" class="fa fa-eye fa-lg"></i>')

But still doesn't work

[Sean-Brown]

@dandro32 the second example you're missing a double quote between [mdTooltip]= and ', also make sure that you're setting the column type to html

[dandro32]

@Sean-Brown - thanks for noticing, but it's still doesnt work. Its also an action default object i'm using, not from datasource.

[jkon]

I'm having a similar issue just trying to add a tooltip or popover to an html element inside a normal html cell. I am seeing this message in my console: WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). here is my valuePrepareFunction: ( value ) => { const val = this.formatValue(value, 'dollar'); return `${val} <i class=ion-ios-information" ngbPopover="'hello'">'; } The formatted value with the info icon renders, but no popover

[Sean-Brown]

Same thing @jkon , inject the DomSanitizer into your component, then in that valuePrepareFunction wrap that string value that you're returning, e.g. this.sanitizer.bypassSecurityTrustHtml(<your html string>), also make sure that column type is set to html

[jkon]

I tried that, but the popover still doesn’t show up. The warning does go away. Also, I was able to the popover to work outside the table just fine

[Sean-Brown]

I also had issues with the tooltip working in a table. Looking at the HTML I noticed that angular (or the ngx-bootstrap tooltip component?) seems to add some extra attributes to the tooltip element, which doesn't happen if the tooltip is added dynamically. I don't know enough about angular to fix it, so I changed the design. Quite unfortunate, maybe someone will come along with a workable example.

[somq]

@jkon @Sean-Brown The easy solution is to create a custom component.

import the module, add the reference to your settings object

...
        type: 'custom',
        renderComponent: STPopoverViewComponent,
...

and you are basically done

[dfilho]

@somq How do I implement this?

[somq]

Follow the doc example to implement the custom component. https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers

The button example one for instance: https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts

Add your popover or tooltip in the component template

@Component({
  selector: 'button-view',
  template: `
      <i class="fa fa-question-circle" style="position: absolute; top: 0.2em; right: 0.2em;"
        *ngIf="hasPopover"
        [ngbPopover]="popContent"
        popoverTitle="{{ value }} content:"
        triggers="{{ popoverTriggers }}"
        container="body"
      >
      </i>
  `,
})

And you are basically done.

[dfilho]

@somq Thanks for your answer, it worked!

[somq]

@dfilho Your welcome!

[brgaulin]

This is a limitation of Angular. When you do an HTML column, what ng2-smart-table does under the hood, is create a <div [innerHTML]=""> and if you look up angular with directives inside of innerHTML, it just doesn't parse them. So a Custom Component is required here =(

But you could make your custom component fairly generic. I'm working on one now that you provide the html, and the tooltip content, and it just injects both of those appropriately

[dario30186]

Hello everyone, you can add tooltip to your custom action without creating any custom component like this:

I hope this helps

[hkhemici]

Rendering a component works perfectly in a column:

column: {
    type: 'custom',
    renderComponent: ComponentWithTooltip, // Renders perfectly.
},

But the declaration simply does not work in a custom action:

actions: {
    columnTitle: 'action-column-title',
        custom: [
            {
                type: 'custom',
                renderComponent: ComponentWithTooltip, // Does not render.
            },
        ],
    //...
},

@somq Am I missing something or is this a bug?

[ccruza]

Follow the doc example to implement the custom component. https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers

The button example one for instance: https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts

Add your popover or tooltip in the component template

@Component({
  selector: 'button-view',
  template: `
      <i class="fa fa-question-circle" style="position: absolute; top: 0.2em; right: 0.2em;"
        *ngIf="hasPopover"
        [ngbPopover]="popContent"
        popoverTitle="{{ value }} content:"
        triggers="{{ popoverTriggers }}"
        container="body"
      >
      </i>
  `,
})

And you are basically done.

Hello! This is working perfectly for me, but I want to change the style based on condition.. For example, the position value is absolute for one column but relative for other column. Also the background is changing for each column.

My question is: How can you change programatically the values on the <i class="fa fa-question-circle" style="" tag?

Thanks!

[jjnanthakumar]

Rendering a component works perfectly in a column:

column: {
    type: 'custom',
    renderComponent: ComponentWithTooltip, // Renders perfectly.
},

But the declaration simply does not work in a custom action:

actions: {
    columnTitle: 'action-column-title',
        custom: [
            {
                type: 'custom',
                renderComponent: ComponentWithTooltip, // Does not render.
            },
        ],
    //...
},

@somq Am I missing something or is this a bug?

I was looking for the same..