     attrs =
       className: "avatar #{@props.className or ''}"
       id: id
+      'data-user': user.key
+      'data-showtooltip': !@props.hide_tooltip
+      'data-anon': @props.anonymous      
       style: style
-      onMouseEnter: => 
-        if !@props.hide_tooltip
-          name = if @props.anonymous || user.name?.length == 0 
-                   'Anonymous' 
-                 else 
-                   user.name
-          tooltip = fetch 'tooltip'
-          tooltip.coords = $(@getDOMNode()).offset()
-          tooltip.tip = name
-          save tooltip
-      onMouseLeave: => 
-        if !@props.hide_tooltip      
-          tooltip = fetch 'tooltip'
-          tooltip.coords = null
-          save tooltip
+
 
     # IE9 gets confused if there is an image without a src
     tag = if !thumbnail? && browser.is_ie9 && img_size == 'thumb' || add_initials then SPAN else IMG

        "/system/avatars/" + \
        "#{user.key.split('/')[2]}/#{img_size}/#{user.avatar_file_name}"  


##
# Avatar

#      Suppress the tooltip on hover. 
#   anonymous (default = false)
#      Don't show a real picture and show "anonymous" in the tooltip. 


window.Avatar = ReactiveComponent
  displayName: 'Avatar'
