Meteor Blaze: Show on mouseover

help
1

I have the following template:

<template name="votestream_item">
    <tr>
        <th>
          @{{voter.voter}}<br>
          {{number voter.sp}} SP
          {{#if whale_vote}}
            (W)
          {{/if}}

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

And its code:

Template.votestream_item.events({
    '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?

2

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:

/client/main.html

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

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

/client/main.js

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

import './main.html';

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

Template.body.helpers({
  showMessage() {
    return Template.instance().messageVisible.get();
  },
});

Template.body.events({
  'mouseenter .js-showmessage'(event, instance) {
    instance.messageVisible.set(true);
  },
  'mouseleave .js-showmessage'(event, instance) {
    instance.messageVisible.set(false);
  },
});
3

Worked like a charm. Thank you :slight_smile: