Search code examples
htmlcsshyperlinksemantics

How to display a link which will show pop-up


I have a table with some text data. One of the columns should be clickable: a pop-up for editing this row will appear.

What is the best way to explain for user that clicking on this row will cause a pop-up? I see 4 variants:

  1. Hyperlink
    <td><a href="#">Smith</a></td>
    Not good cause usually links open new pages.
  2. Dotted-underline link
    <td><span style="cursor:pointer; border-bottom: dotted 1px">Jackson</span></td>
    User will expect a hovering help window.
  3. Button
    <td><button>Doe</button></td>
    Looks bad and also not clear what will happen after click.
  4. Clickable icon
    <td>Johnson <span style="cursor:pointer" class="glyphicon glyphicon-edit"></span>
    I'd like to avoid repeating the same element many times.

Here is a fiddle with all of these variants.


Solution

  • The icon is the most appealing as the other ones just show that you will be taken to more info. While the icon is clear that the user will edit.

    I would also make it a hover affect for it like so:

    $(document).ready(function() {     
        $('#test2').hover(function(){     
            $('#test').addClass('glyphicon glyphicon-edit');    
        },     
        function(){    
            $('#test').removeClass('glyphicon glyphicon-edit');     
        });
    });   
    

    the #test2 is the cell and #test is the span.

    http://jsfiddle.net/Ugc9C/2/