Meteor Blaze: Show on mouseover


I have the following template:

<template name="votestream_item">
          {{number voter.sp}} SP
          {{#if whale_vote}}

          <a href="{{post.url}}" target="_blank">{{truncate post.identifier 100}}</a> <br>
          ${{post.payout}} - {{post.votes}} votes - posted {{timeFromNowReactive post.created_at}}
        <td>{{timeFromNowReactive created_at}}</td>

And its code:{
    'mouseenter tr': function(e) {
        console.log("show data")
    'mouseleave tr': function(e) {
        console.log("hide data")

What I would like to do, is show this data when mouse enters, and hide it when mouse leaves:

${{post.payout}} - {{post.votes}} votes - posted {{timeFromNowReactive post.created_at}}

What would be the most elegant way to achieve this?


There are many ways you can handle this (such as hiding/showing via jquery, dynamically inserting/removing a Template with only the content you want to show, etc.). Here’s a quick made up example leveraging Template includes and a ReactiveVar:


  <h1>Hide/Show Example</h1>
  <p class="js-showmessage">Hover over me!</p>
  {{#if showMessage}}
    {{> message}}

<template name="message">
    <strong>Hidden message!</strong>


import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.body.onCreated(function onCreated() {
  this.messageVisible = new ReactiveVar(false);

  showMessage() {
    return Template.instance().messageVisible.get();
  'mouseenter .js-showmessage'(event, instance) {
  'mouseleave .js-showmessage'(event, instance) {


Worked like a charm. Thank you :slight_smile: