How to create a jquery popup bubble for strongly typed views in asp.net mvc

Question

Hi I am trying to create a jquery popup bubble for items created in a strongly typed view from a database in asp.net

I have found a number of examples but nothing that really helps. Any help would be appreciated.

Here is a sample of my strongly typed view with the table and items within the table columns:

  <table>
      <tr>
          <th>
              name
          </th>

  <% foreach (var item in Model) { %>

      <tr>
          <td>
              <%= (item.name) %>
          </td>
      </tr>

  <% } %>

  </table>

Answer 1

Put the bubble info somewhere on the page, inside a div tag perhaps. Put a class on the div tag that makes it (1) hidden and (2) absolutely positioned relative to the td tag.

Next, on the hover or click event of <%= item.name %>, you'll use jQuery to show() or hide() the popup.

<style>
    .myTable td { position:relative; top:0; left:0; }
    .myBubble { display:none; position:absolute; top:-100px; background:#CCC; }
</style>

<table class="myTable">
    <tr>
        <th>name</th>
    </tr>
    <% foreach (var item in Model) { %>
    <tr>
        <td>
           <div class="myTrigger"><%= (item.name) %></div>
           <div class="myBubble">
               <%= item.description %><br />
               <%= item.publishDate %>
           </div>
        </td>
    </tr>
    <% } %>
</table>

<script>

    // presuming you've already included a reference to the jQuery library...

    $('.myTrigger').hover( function () {
        // show the adjacent bubble content
        $(this).parent().find('.myBubble').show();  
    },   
    function () {
        // hide the adjacent bubble content
        $(this).parent().find('.myBubble').hide();
    });

</script>