# Tooltip Override in Month View Calendar component

**URL:** <https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343>\
**Category:** Ignition\
**Created:** [December 8, 2016, 5:08pm UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343 "2016-12-08T17:08:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![c-w-t](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@c-w-t](https://forum.inductiveautomation.com/u/c-w-t)\
**Post date:** [December 8, 2016, 5:08pm UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343/1 "2016-12-08T17:08:39Z")

</div>

I’d like to ovveride the tooltip popup text in the month view component with results from a query related to the event hovered over. How would I acquire the index of the item hovered over (like selectedEvent, but like “hoveredEvent”), and then override the tooltip text? I’ve tried setting the toolTipText property (Mouseover Text) manually, but it doesn’t override the tooltip contents when you hover over an event, only when you hover over the month view object itself.

Thanks!  
Clint.

---

<div class="post-metadata">

**Author:** ![jbowers](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@jbowers](https://forum.inductiveautomation.com/u/jbowers)\
**Post date:** [April 4, 2018, 10:52pm UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343/2 "2018-04-04T22:52:12Z")

</div>

I am also looking to do this and cannot figure it out.

Anyone have ideas?

---

<div class="post-metadata">

**Author:** ![juang](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@juang](https://forum.inductiveautomation.com/u/juang)\
**Post date:** [April 16, 2019, 8:23am UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343/3 "2019-04-16T08:23:57Z")

</div>

You can go bind the property events to soemthing like this and it will work when you hoovered over it.

```sql
--You use CONCAT to create the message you want to display in the tooltip. as you can see below.
 SELECT cast(appointtime as datetime) as start_date, cast(appointtime as datetime)
  as end_date, 'blue' as displayColor ,
(SELECT CONCAT('SO #', ordernumber, '<html><br> 
  Appointment time: ', appointtime, ' <br><br> Customer Name:',customername))
   as display FROM orders
   inner join customers c on c.id=orders.customerid

```

The only trouble I’m running into is that the client shows in the Calendar Component the html language code. I don’t know how to fix that yet. but we need html in order to organize the message you want. it will give a result like this.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9eae9880dccf5e7dba6795d5ff5262b9660b7235.png)

a simple non standard solution to the problem would be adding white space before the text , this way the calendar event won’t show the words, html when you are looking at it and ,since the tooltip actually works correctly with , it ignores the white space so it works perfectly. but again this is not a standard solution. the code will be like this.

```sql
--I added white space after the order number, but before the <html>, this is in the case you are trying to put multiple information from a query like on my examples . i have SO, then i query ordernumber and so on. 
 SELECT cast(appointtime as datetime) as start_date, cast(appointtime as datetime)
  as end_date, 'blue' as displayColor ,
(SELECT CONCAT('SO #', ordernumber, ' <html><br> 
  Appointment time: ', appointtime, ' <br><br> Customer Name:',customername))
   as display FROM orders
   inner join customers c on c.id=orders.customerid

```

result is this.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/30777c9513f6aef6b895065eddd112814f7881c4.png)

Hope it helps.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [April 16, 2019, 11:33am UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343/4 "2019-04-16T11:33:56Z")

</div>

Try putting your \<html\> codes at the very beginning of your string concatenation…

---

<div class="post-metadata">

**Author:** ![juang](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@juang](https://forum.inductiveautomation.com/u/juang)\
**Post date:** [April 28, 2019, 3:23am UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343/5 "2019-04-28T03:23:29Z")

</div>

I had the at the beginning of the concat before, but it did not produce results I expected , that it is why i moved it to start later. putting the at the beginning makes it unreadable ,like example below. but thanks for the suggestion.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a85f6dc54920f951bf0d6100d3c7acfbb8cc6145.png)

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [April 29, 2019, 12:47pm UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343/6 "2019-04-29T12:47:35Z")

</div>

I don’t see a closing tag for the html in the concatenation, and since the break line tag is typically a self closing tag, you may want to change that to `<br />`, just to insure that the HTML is well formed.

```auto
 SELECT cast(appointtime as datetime) as start_date, cast(appointtime as datetime)
  as end_date, 'blue' as displayColor ,
(SELECT CONCAT('SO #', ordernumber, '<html><br/> 
  Appointment time: ', appointtime, ' <br/><br/> Customer Name:',customername,'</html>'))
   as display FROM orders
   inner join customers c on c.id=orders.customerid

```

Perhaps you’re adding the closing tag elsewhere in the code that you didn’t include, but this was what I noticed. If the HTML isn’t well formed it will not be parsed resulting in the tags being interpreted as normal strings.

---

<div class="post-metadata">

**Author:** ![juang](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@juang](https://forum.inductiveautomation.com/u/juang)\
**Post date:** [May 6, 2019, 2:25pm UTC](https://forum.inductiveautomation.com/t/tooltip-override-in-month-view-calendar-component/12343/7 "2019-05-06T14:25:31Z")

</div>

Thanks, but i get the same unwanted result,so I will keep my original idea, which is not conventional, but gives 100% what i need.