How do we position the floating chat bubble to right of Santa?

[WorldNews]

Hello All,

We have a lil fun XMAS related message on our Homepage, which is a Santa that moves around.
We would like to have a chat like bubble show up to the right of his head.
Everything is done and working fine, except for the position of the chat bubble.
As you can see on this test page:

ERROR: Missing Page

FYI: The chat bubble appears when the Santa stops moving, which will be the case by either you clicking on the Santa or Santa moving back & forth 5 times.

So what is the correct CSS to get the chat bubble display to the right side of Santa’s head. The point of chat bubble being flush with his glasses. Since at left most position we wound not want the chat bubble to get in the way of the Search button.

Much Thanks

[Erik_J]

@WorldNews

So what is the correct CSS to get the chat bubble display to the right side of Santa’s head. The point of chat bubble being flush with his glasses. Since at left most position we wound not want the chat bubble to get in the way of the Search button.

Try use negative top and right coordinates. E.g:

.speech_bubble { 
    ...
    top: -50px;
    right: -140px;
    ...
}

Follow your request the point being flush with his glasses would make it cover the search button, so either the point moves or it would be flush with his mouth.

Or the bubble could be lower instead:

[WorldNews]

Hi Erick,

We fixed the problem, with slightly different CSS values.
Thanks & Cheers,