-1

I have a very long HTML page. It consist of the few HTML tables at the bottom of the page.

I have few links/buttons at the top for each table at the bottom. On hover/click of these links/buttons I want that table to appear at the top of the HTML page. Similar to tooltips but entire table should be in the tooltip.

I don't want original table at the bottom to change/disappear in anyway. Just like a short cut to access different elements on the page.

Is it possible?

yetanothercoder
  • 385
  • 2
  • 6
  • 15
  • You'll have to implement your own "tooltip" elements or use [one of the many libraries out there](https://www.google.com/search?q=jquery+tooltips+plugin). A tooltip with anything other than simple text would need to be something custom made. As long as you can [detect the mouse position](http://stackoverflow.com/questions/4517198/how-to-get-mouse-position-in-jquery-without-mouse-events), it's only an issue of 'floating' an element close to the current pointer position when a hover event occurs on the element. – Lix Jun 03 '15 at 11:07
  • your question is very broad. You should put a shortened HTML of your page. That makes it easier to give you support. – Christian Jun 03 '15 at 11:08
  • It doesn't have to be a tooltip. Just that when you click on the link or button, I should be able to access that table then and there only without having to scroll down the page. We could open a new popup with the table. – yetanothercoder Jun 03 '15 at 11:10

2 Answers2

0

You could use the bootstrap popover and load HTML content of whatever you wish. This way you are using the library to implement the popover vs. coding it with jquery or raw JS.

You will find more information here. HTML inside Twitter Bootstrap popover

Community
  • 1
  • 1
Josh
  • 694
  • 7
  • 10
  • I don't want to copy the target table html and then show it in a popup. Copying the HTML will create elements with duplicate ids. Even if i change the ids, there are lots of dynamic stuff in the table. So we just want another trigger to open the same table without cloning the table itself. – yetanothercoder Jun 03 '15 at 11:15
  • My answer is not dependent on what content you put in the popover. Your question was how to show a table when hovering over an anchor link, not how do I clone table data. Please accept my answer or change your question. – Josh Jun 03 '15 at 11:16
0

Of course it's possible. you can always change innerHTML. When you click/hover a button, your method just appends the contents of that table to a spesific div of your choice. Because you can get innerHTML of anything, you can anything you want with it. I gave an example below. But try to stick to ask questions about spesific code examples. Try something and come back when you have a problem you can't solve. Happy coding

$('#dynamicDiv').html($('#divToCopy').html() + $('#dynamicDiv').html());
Emre Türkiş
  • 992
  • 9
  • 23