3

A google chrome extension can have a browser action which displays a 'popup' when clicked on. I would like to display such a popup when someone hovers over an element on a page. Below is an example of a popup that floats over the actual page. How can I achieve this with a chrome extension?

Cheers,

Pete

alt text

1 Answers1

6

I have answered a similar question before on stackoverflow, Text Selection and Bubble Overlay as Chrome Extension.

Basically, you use Content Scripts and whichever action you want to do (either selection, click, etc) you show the popup DOM. The popup DOM is basically an element is styled in an absolute positioned relative to the body or html. Everytime you want to show that popup, you can move its style 'top' and 'left' to the appropriate location.

Community
  • 1
  • 1
Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • Mohamaed your example is good but what do you do in order to populate content to your newley created div var bubbleDOM = document.createElement('div'); ?? – Tom Feb 01 '12 at 19:18
  • @Tom I have shown code in the link in this answer, what do you mean to populate? That bubbleDOM is there as a placeholder which will allow you to move that bubble to an absolute position when appeared. Instead of creating multiple bubbles. – Mohamed Mansour Feb 02 '12 at 23:10