How to show an object as tooltip using bootstrap syntax in angular component

Question

i have an object like this var obj = {"test price type ty dynamic ": 10, test: 7, pricetype1u: 0, Price type 3: 0, Price type 2: 0}

in an angular component html, using bootstrap i written like this

<button type="button" 
        icon="file-excel" 
        data-toggle="tooltip" 
        data-placement="top"
        title="{{obj}}">

        <span class="k-icon k-i-info"></span>
</button>

tooltip is showing like (object) this:

{
  "test price type ty dynamic ": 10, 
   "test": 7, 
   "pricetype1u": 0, 
   "Price type 3": 0, 
   "Price type 2": 0  
}

my requirement is to show tooltip like this

  test price type ty dynamic : 10
  test : 7
  pricetype1u : 0
  Price type 3 : 0
  Price type 2 : 0

please help me how can i get this required format

Do you need this format for all object tooltips?

huan feng
– huan feng

2020-06-29 06:51:53 +00:00
Commented Jun 29, 2020 at 6:51 — huan feng
– huan feng, Commented Jun 29, 2020 at 6:51

huan feng · Accepted Answer · 2020-06-29 07:12:02Z

2

If you have this requirement for all your object tooltips, you should consider a pipe. Copy below implementation into a pipe should be work.

If you just need this format once, you can just write a simple function to handle it:

function convertObjTooltip(obj: any) {
    const results = [];
    Object.keys(obj).reduce((sum, key) => {
        sum.push(`${key}: ${obj[key]}`);
        return sum;
    }, results);
    return results.join('\n');
}

I didn't remove the first change line, you can handle it by yourself.

Calling it in your template:

<button type="button" 
    icon="file-excel" 
    data-toggle="tooltip" 
    data-placement="top"
    title="{{convertObjTooltip(obj)}}">

edited Jun 29, 2020 at 7:12

answered Jun 29, 2020 at 7:03

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shaik Habeeb Over a year ago

it works, thank you so much huan ... i written a console it always triggering in background , it is good practice

huan feng Over a year ago

Yes, Actually binding property to function call is not a good idea, you can avoid this by simple assign the calculated value to variable in component, and use that value in template. This should avoid the performance issue.

Shaik Habeeb Over a year ago

as you asked me to do i created angular pipe so it will be called once only and working fine.... Thank You huan.

Collectives™ on Stack Overflow

How to show an object as tooltip using bootstrap syntax in angular component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related