Reftagger in responsive design

Ryan

On desktop, this is fantastic. With mobile traffic becoming the majority web population, making reftagger responsive friendly would be a good move. I'm just thinking out loud here.

Currently, touch interaction can be confusing for users. When tapped, a link opens but can easily be accidentally tapped again or if the popup is closed and the user taps it again he is redirected. That's the biggest one really. Rather than using a focus affect with js, a visible close button would be helpful for responsive layouts. 

I'm not finding a responsive site to see a demo of the styling, but the popup would need to respect the max screen size so nothing appears off screen.

Mark Goldsmith

I figured out a workaround on how to make Reftagger work better for mobile devices. Essentially the width of the tooltip is too wide, so I created a custom CSS file and loaded that. So here is what my Javascript looks like ( you need the cssOverride attribute set to true) :

<script>
 var refTagger = {
 settings: {
 cssOverride:true,
 bibleVersion: "NIV",
 roundCorners: true,
 socialSharing: [],
 }
 };
 (function(d, t) {
 var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
 g.src = "//api.reftagger.com/v2/RefTagger.js";
 s.parentNode.insertBefore(g, s);
 }(document, "script"));
 </script>

Then I loaded my custom CSS and make sure that .rtToolTip had a width of 280px;

.rtTooltipHeader{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.rtTooltipBody{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.rtTooltipBody .ch-ref{font-weight:700}
.rtTooltipFooter{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.rtTooltipFooter a:link,.rtTooltipFooter a:visited{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;font-weight:400;text-decoration:none}
.rtTooltipDropShadow .rtContainer{-webkit-box-shadow:0 0 6px 0 #444;-moz-box-shadow:0 0 6px 0 #444;box-shadow:0 0 6px 0 #444}
.rtTooltipRoundedCorners .rtContainer{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;overflow:hidden}
.rtLight .rtContainer{background:#fff}
.rtLight .rtTooltipHeader{background:#e7e7e7;color:#333}
.rtLight .rtTooltipBody{color:#666}
.rtLight .rtTooltipFooter a:link,.rtLight .rtTooltipFooter a:visited{font-size:12px;color:#ccc}
.rtLight .rtTooltipFooter a:hover{color:#666}
.rtDark .rtContainer{background:#555}
.rtDark .rtTooltipHeader{background:#888;color:#eee}
.rtDark .rtTooltipBody{color:#fff}
.rtDark .rtTooltipFooter a:link,.rtDark .rtTooltipFooter a:visited{color:#999}
.rtDark .rtTooltipFooter a:hover{color:#eee}
.rtTooltipSocialIcon{background:url(//bible.logos.com/v2/social-icons.png)}
.rtTooltip{text-align:left;text-indent:0;width:280px;min-height:140px;z-index:99}
.rtTooltip div{text-align:left}
.rtTooltipHeader{border:0;font-size:14px;font-weight:700;line-height:32px;height:32px;margin:0;padding:0 20px 0 15px}
.rtTooltipBody{border:0;line-height:1.4;font-size:14px;margin:0;min-height:40px;padding:19px 20px 0 15px}
.rtTooltipBody .ch-ref,.rtTooltipBody .verse-ref{font-size:85%;position:relative;top:-1px}
.rtTooltipFooter{border:0;font-size:14px;line-height:14px;letter-spacing:normal;padding:22px 32px 12px 15px;text-align:left}
.rtTooltipFooter div{text-align:right}.rtTooltipFooter .rtTooltipMoreLink{float:right}
.rtTooltipFooter .rtTooltipBrandLink{display:inline-block;margin-right:20px;font-size:12px}
.rtTooltipSocial{float:right}
.rtTooltip .rtTooltipSocialIcon{display:inline-block;margin-top:8px;height:19px;width:21px}
.rtTooltip,.rtTooltip a,.rtTooltipBody p,.rtTooltipBody span{letter-spacing:normal;margin:0;padding:0}
.rtLibronix img{float:none}.libronixLinkImage{border:0;float:none;margin:0 0 0 4px;padding:0}