Material Design Lite - Tool Tip positioning

Question

When using MDL tooltips (https://getmdl.io/components/#tooltips-section) the tooltip appears just below the <div> that it is linked to.

I would like to have the tooltip appear to the right of the element it referencing, instead of underneath.

So far I have attempted editing my styles.css like so unsuccessfully .mdl-tooltip { right: 50px; }

Any help would be appreciate

Answer 1

Just use the mdl-tooltip--right class to your tooltip:

<div id="tt1">add</div>
<div class="mdl-tooltip mdl-tooltip--right" data-mdl-for="tt1">
Follow
</div>