Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tooltip on action buttons

See original GitHub issue

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>'
        } ,

Issue Analytics

State:
Created 6 years ago
Comments:17

Top GitHub Comments

4reactions

somqcommented, Mar 22, 2018

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.

1reaction

hkhemicicommented, Apr 10, 2019

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?

Top Results From Across the Web

Tooltip - Components

Secondary buttons have lower priority in tooltips and they allow users to access useful content. Secondary buttons may not be provided unless there...

Tool Tips over Action Buttons? - Google Cloud Community

Here's a little trick to get the name of an action so that you can find it more easily in the editor: [Action...

Use action button tooltips

Use action button tooltips ... Action buttons can have a tool tip defined in the AXVW: <action> ... <tooltip>Approve the current project</tooltip>

Tooltip for Buttons or Images - Microsoft Power BI Community

Both buttons and images have tooltips already. You must first turn on "action", then you will see the tooltip option.

Tooltips on action buttons? - Feature Requests - Retool Forum

To save space, our action buttons are all emojis. But, that means that no one knows what the hell they do... Is there...