# ToolTip not functioning as intended

**URL:** <https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 3, 2024, 5:19pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305 "2024-04-03T17:19:06Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_Perry](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Michael\_Perry](https://forum.inductiveautomation.com/u/Michael_Perry)\
**Post date:** [April 3, 2024, 5:19pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/1 "2024-04-03T17:19:06Z")

</div>

I have a configured Tooltip , however it does not seem to function as intended.

what am I missing?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/7/976c3081aba9e6c0549e501b8c3716a2caaafc28.png)

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [April 3, 2024, 5:20pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/2 "2024-04-03T17:20:55Z")

</div>

What isn't it doing? What type of object is this?

The name that you have there is the internal meta name of the object.  
The text you want to show in the tool tip goes into the text property.

---

<div class="post-metadata">

**Author:** ![Michael\_Perry](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Michael\_Perry](https://forum.inductiveautomation.com/u/Michael_Perry)\
**Post date:** [April 3, 2024, 5:22pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/3 "2024-04-03T17:22:34Z")

</div>

As I understand this should produce a Mouse over text of "Gantry"

however no text pops up when moussing over the component

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [April 3, 2024, 5:24pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/4 "2024-04-03T17:24:33Z")

</div>

I'm not sure why `Tooltip` is capitalized or if it matters, but by default, it should be `tooltip`:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e420e49d4712416907f15e39c8789521d7193d7e.png)

Also, what version are you on? Tooltips were added in 8.1.10 ish or so

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [April 3, 2024, 5:24pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/5 "2024-04-03T17:24:34Z")

</div>

The text that will show up in the tooltip is Gantry.

Can you show a screen shot of all the props for the component?  
Is this a label component?

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [April 3, 2024, 5:25pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/6 "2024-04-03T17:25:11Z")

</div>

Yeah... missed that completely.

---

<div class="post-metadata">

**Author:** ![Michael\_Perry](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Michael\_Perry](https://forum.inductiveautomation.com/u/Michael_Perry)\
**Post date:** [April 3, 2024, 5:34pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/7 "2024-04-03T17:34:26Z")

</div>

yes its a "label" component

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/67150eae4b07fb7b514a324e9f2e304743d925f7.png)

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [April 3, 2024, 5:36pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/8 "2024-04-03T17:36:30Z")

</div>

OK what version of Ignition?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 3, 2024, 5:36pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/9 "2024-04-03T17:36:42Z")

</div>

Looks like you are missing several properties for the tooltip. Probably easiest at this point to drop a new label and start over.

The tooltip props should already be there, you don't need to add them. If you had to add them then they aren't supported in your version.

---

<div class="post-metadata">

**Author:** ![Michael\_Perry](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Michael\_Perry](https://forum.inductiveautomation.com/u/Michael_Perry)\
**Post date:** [April 3, 2024, 5:39pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/10 "2024-04-03T17:39:19Z")

</div>

8.1.5

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [April 3, 2024, 5:41pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/11 "2024-04-03T17:41:34Z")

</div>

OK... like @YF129701 said above they were introduced around 8.1.10 so they aren't available. And as of right now, you are ~33 minor revisions behind the current version. I'd schedule some time and see if you can upgrade.

---

<div class="post-metadata">

**Author:** ![Michael\_Perry](https://avatars.discourse-cdn.com/v4/letter/m/a6a055/32.png) [@Michael\_Perry](https://forum.inductiveautomation.com/u/Michael_Perry)\
**Post date:** [April 3, 2024, 5:43pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/12 "2024-04-03T17:43:48Z")

</div>

interesting so whats a work around to get a mouse over text?

---

<div class="post-metadata">

**Author:** ![bschroeder](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bschroeder/32/13260_2.png) [@bschroeder](https://forum.inductiveautomation.com/u/bschroeder)\
**Post date:** [April 3, 2024, 5:45pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/13 "2024-04-03T17:45:05Z")

</div>

There isn't one that I know of unless you spin your own using scripting. The best workaround is to upgrade your version to one that supports it. Since you are on 8.1.5 you can upgrade with your license. I'd upgrade and test offline if you can to make sure that there aren't any other issues.

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [April 3, 2024, 5:52pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/14 "2024-04-03T17:52:47Z")

</div>

Also, in Ignition CSS properties are in camelCase rather than kebab-case, so  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a8199ca1a775bd0b30ae497ecc6688c54db37b8b.png)  
won't work. You'll want:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a8b64562b67064c7361333f0edc6f086fe5be3bf.png)

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [April 3, 2024, 7:02pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/15 "2024-04-03T19:02:22Z")

</div>

Not to be pedantic on a solved forum post, but what you call kebab-case is actually what CSS uses. The fact that Ignition uses camelCase at the view layer doesn't change the fact that, under the hood, `whiteSpace` becomes `white-space` in the session. And, because CSS is not case-sensitive, `White-space` is equivalent to `white-space`, which is the actual CSS property. Personally, I don't use Ignition's CSS layer, I find it clunky and if you have to learn Ignition's CSS camelCase properties, you may as well learn the actual CSS properties so that you can use that knowledge elsewhere. I'm sure there's a good reason for it, but as a sign of protest, I use regular 'ol CSS properties.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8cd5f35b2d59b6644be2eadcf59fb776fc042968.jpeg)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 3, 2024, 11:00pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/16 "2024-04-03T23:00:43Z")

</div>

As long as we're being pedantic, Ignition/React uses camelcase for CSS identifiers because kebab case is awful for programming contexts.  
Is `min-width` a declaration of a variable, or an expression `min` minus `width`?

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [April 3, 2024, 11:17pm UTC](https://forum.inductiveautomation.com/t/tooltip-not-functioning-as-intended/88305/17 "2024-04-03T23:17:08Z")

</div>

> [@paul-griffith](#):
>
> React

Ah, here is the reason why it is this way.. I completely forgot about how Perspective is built 💀

So you're saying to remove a color from the background, I use the cSs property `background-color`? /s
