Reftagger Tooltip & Font size

Bob Diebel

Greetings, and thanx for all you do!

I have used Reftagger for years. It is great and works flawlessly.

As I use it for displaying verses during training it is good to have it as visible as possible.

Is there any way it could be a bigger tooltip, a larger font, and the possibility of Bold/Italic/Underline?

This would greatly enhance its visibility and usefulness especially on smaller screens.

This product is excellent... is it time to make it even better!

Again,

Thanx,

In HIM,

Bob Diebel

Find more posts tagged with

Comments

Victor Bushong (Faithlife)

Hi Bob,

You can use the customStyle setting to adjust the font size. For example:



var refTagger = {
  settings: {			
    customStyle: {
      body: {
          fontSize: "26px"
        }
      }
    }
  }
};

There's no supported method for changing the width/size of the tooltip, but if you are comfortable with CSS you could overwrite the style manually. For example, this would change the width to 600 pixels wide:



.rtTooltip {
  width: "600px";
}

For bold/italic/underline I'm assuming you mean within the passage text itself. Unfortunately I'm not aware of anyway to do that.

Victor Bushong (Faithlife)

Another thing I thought of: when presenting, you could try adjusting the zoom level of your web browser. The Reftagger popup will then appear larger in respect to the browser's zoom level. May not work for your use case, but just a thought.

Bob Diebel

https://community.logos.com/discussion/comment/1179106#Comment_1179106

Could you tell me how to get to the CSS code please?

Bob Diebel

https://community.logos.com/discussion/comment/1179106#Comment_1179106

The heading font size works, but the body font size makes the word "more" bigger, not the scripture text.

Bob Diebel

https://community.logos.com/discussion/comment/1183124#Comment_1183124

Is this still being monitored? Is Reftagger still being maintained?

In my experience it is not working right as is (at least the custom version), and it could be enhanced to be a much more profitable tool.

I may be wrong, but I do not think it would take too much development time to enlarge the Tooltip, and get the body font size working correctly.

Please Help

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1183376#Comment_1183376

Sorry for the delay. I will take a look and get back to you.

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1183376#Comment_1183376

Also, would you be able to post the reftagger code you are currently using on your site?

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1183376#Comment_1183376

Here is an example I put together.

It uses this CSS:

		.rtTooltip {
			width: 800px;
		}
		.rtTooltipHeader {
			font-size: 36px;
			line-height: 36px;
			height: 36px;
			padding: 10px 20px;
		}
		.rtTooltipBody {
			font-size: 36px;
		}

Is this getting closer to what you'd like to see?

You can put this CSS within a style element on your page, or within a CSS file that your page uses (it depends on how your site is setup - do you use a custom built site or are you using a platform like WordPress?)

Bob Diebel

https://community.logos.com/discussion/comment/1183455#Comment_1183455

8726.ReftaggerCustom.txt

This is now working much better.

I would however like to know how to incorporate your code to give me more control.

I would also like to be able to turn off the links that make the tip harder to read; see below.

Bob Diebel

https://community.logos.com/discussion/comment/1183610#Comment_1183610

Your help is much appreciated. I do not take your giving of your time lightly.

But if you do find time I am working in two areas.

One is Word Press. I have a site called "TruthRightlyDivided.ca"

The other way is to create a file in MS Word, save as HTML, Use Notepad++ to add Reftagger code.

This is working well now, but any advise as to gaining more control over Reftagger display is most welcome.

Such as how to incorporate your CSS in both places.

Thanx a bunch!

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1183610#Comment_1183610

> I would also like to be able to turn off the links that make the tip harder to read; see below.

This appears like the same issue as here: https://community.logos.com/forums/t/197190.aspx

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1183611#Comment_1183611

save as HTML, Use Notepad++ to add Reftagger code.

When doing this, you can add the CSS directly in the HTML file. Put the CSS inside a <style> element within the <head> element. It would look like:



<html>
<head>
  <style>
    .rtTooltip {
			width: 800px;
		}
		.rtTooltipHeader {
			font-size: 36px;
			line-height: 36px;
			height: 36px;
			padding: 10px 20px;
		}
		.rtTooltipBody {
			font-size: 36px;
		}
  <style>
</head>
<body>
  <!-- page content here, etc. -->
</body>

For the Wordpress site it will be a bit trickier. Usually there is an option in the WordPress theme editor for "Additional CSS" where you can directly paste the CSS code. Otherwise I believe you would have to edit the theme files directly. Sorry I can't provide more clear direction on that.

Bob Diebel

https://community.logos.com/discussion/comment/1183627#Comment_1183627

I have two current issues: Can I change Reftagger settings for large Tip & Font size in the Word Press Plugin?

And can I get a certain Ref back in Greek.

Thanx for your previous help. I can now control my simple code, but still not my Work Press site.

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1185246#Comment_1185246

I'll have to investigate what the word press plugin supports.

As for "And can I get a certain Ref back in Greek.", do you mean have a Greek translation for reftagger? That is not available as far as I know.

Bob Diebel

https://community.logos.com/discussion/comment/1185693#Comment_1185693

Acts 5:1-11 BYZ - This works in simple HTML.

There is a long list of Bibles on Biblia.com, but I do not know how to find the character codes (like the BYZ here) to get the Ref back in that Bible with Reftagger.

Is there a shorter list that works with Reftagger?

Thanx for7725.BibliaBibles.mp4 all help!

Bob Diebel

https://community.logos.com/discussion/comment/1185744#Comment_1185744

Just to add a wish list item...

I would also like to be able to ask for more words to be returned. References are too often cut off in the middle. Maybe 1.5X, or even 2X as many words so slightly longer references could be complete. If the request had a field to request extra words or not.

Thanx,

Bob Diebel

https://community.logos.com/discussion/comment/1186050#Comment_1186050

Maybe I need to file this under the old adage "if you play with something long enough, it will break" : -)

Reftagger is not working on my website. I removed the plugin, and re-installed it and it is still not working.

Any advice?

Thanx,

Bob

Please disregard. I think I know the issue as only part of the pages fail.

Bob Diebel

https://community.logos.com/discussion/comment/1185693#Comment_1185693

I know I am asking a lot, but if anyone out there enjoys a challenge I have just the thing for you.

For all others, if you do not check out the attached, I will not have used too much of your time.

All help much appreciated.

In HIM,2045.ToolTipControl.docx

Bob Diebel.

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1185744#Comment_1185744

There is a long list of Bibles on Biblia.com, but I do not know how to find the character codes (like the BYZ here) to get the Ref back in that Bible with Reftagger.

Is there a shorter list that works with Reftagger?

The shortcode will appear in the biblia url, like: https://biblia.com/books/nlt/2Co1.3 has "nlt".

However, if you are using resources other than the free resources already listed listed, then any visitors to your site that don't own the resource will not be able to see it.

Bob Diebel

https://community.logos.com/discussion/comment/1185693#Comment_1185693

Did you find out how to change Tooltip and font size with the plugin?

All help much appreciated.

In HIM,2045.ToolTipControl.docx

Bob Diebel.

Bob Diebel

https://community.logos.com/discussion/comment/1185693#Comment_1185693

Have you found how to change the tooltip and font size when using the Word Press Plugin?

All help much appreciated,

In HIM,

Bob D.

Victor Bushong (Faithlife)

https://community.logos.com/discussion/comment/1189298#Comment_1189298

It is not supported through the WordPress plugin currently. Unfortunately I don't have any word on whether that work will get prioritized soon.

Bob Diebel

https://community.logos.com/discussion/comment/1189316#Comment_1189316

The value of putting the Word of God in front of the eyes in a clear readable manor can hardly be overstated.

The ability to use the Word of God as a teaching tool visually is imperative.

Reftagger goes a long way toward this goal.

It would, however go a great deal further in fulfill the goal if there was the ability to create larger, more readable tips/fonts.

I feel the need and urgency for this excellent tool to be improved is being seriously underestimated.

I would implore the powers that be to allow the code version, and Word Press plugin version to be enhanced to be the exceptional teaching assistant it could be.

With deep respect for all you do, please, please take action.

Paul

https://community.logos.com/discussion/comment/1192238#Comment_1192238

Hi Bob, I am new to reflagger. I am using it inside a bible commentary app so I am using the code version. I have the opportunity to add the code as part of the download of the book/chapter HTML. I am able to change the font size relative the size the user has chosen for the text of the commentary. I also modified the box for the tooltip so that is was full width on mobile devices and a max of 600px on tablets.

<style>

.rtTooltip {

width: 100%;

max-width: 600px;

}

.rtTooltipHeader {

padding: 10px 10px;

}

</style>

and here is the custom config for the tool tip placed at the bottom of the body. note the use of "em" instead of hard coded 'px'. My app has a text format setting where the user increases or decreases the font size. The tooltip follows this change. I may make the tooltip box be a bit more dynamic in the next go around.

var refTagger = {

settings: {

bibleReader: "bible.faithlife",

bibleVersion: "${taggerBible}", //handle English and Spanish

roundCorners: true,

socialSharing: [""],

customStyle : {

heading: {

backgroundColor : "#014161",

color : "#fffff7",

fontFamily : "Arial, 'Helvetica Neue', Helvetica, sans-serif",

fontSize : "1.0em",

fontWeight: "light",

lineHeight: "1.0em",

body : {

color : "#000000",

fontFamily : "Arial, 'Helvetica Neue', Helvetica, sans-serif",

fontSize : "1em"

}

};

(function(d, t) {

var n=d.querySelector("[nonce]");

refTagger.settings.nonce = n && (n.nonce||n.getAttribute("nonce"));

var g = d.createElement(t), s = d.getElementsByTagName(t)[0];

g.src = "https://api.reftagger.com/v2/RefTagger.js";

g.nonce = refTagger.settings.nonce;

s.parentNode.insertBefore(g, s);

}(document, "script"));

</script>

Paul

https://community.logos.com/discussion/comment/1220217#Comment_1220217

well the screen shots were delete. I can email them to you if you want.

MJ. Smith

https://community.logos.com/discussion/comment/1220219#Comment_1220219

Did you use the paper clip or the amber icon to its right to upload the picture?

Paul

https://community.logos.com/discussion/comment/1220239#Comment_1220239

I cut and pasted them

Bob Diebel

https://community.logos.com/discussion/comment/1220217#Comment_1220217

Thanx a bunch. I will try this.

Bob Diebel

https://community.logos.com/discussion/comment/1220271#Comment_1220271

Your help is much appreciated.

EMAIL:

jrdiebel@gmail.com

Bob Diebel

https://community.logos.com/discussion/comment/1220217#Comment_1220217

I have not been able to get this working for me.

I may need a complete example.

Paul

https://community.logos.com/discussion/comment/1220282#Comment_1220282

OK, I will get to it later this afternoon.

MJ. Smith

https://community.logos.com/discussion/comment/1220269#Comment_1220269

I cut and pasted them

That doesn't work - you must use the paperclip or Amber

Paul

https://community.logos.com/discussion/comment/1220282#Comment_1220282

I sent you an email so that all the formatting did not get screwed up.

Paul

Bob Diebel

https://community.logos.com/discussion/comment/1220347#Comment_1220347

This is great Paul. I puts me in control of much.

One thing I would still like to be able to do is request the tool tip be larger so as to contain more verses, maybe even with a a slider bar on the side to scroll it. See:

<script type="text/javascript" src="https://labs.bible.org/api/NETBibleTagger/v2/netbibletagger.js">org.bible.NETBibleTagger.customCSS = true;

Paul

https://community.logos.com/discussion/comment/1220445#Comment_1220445

You can add height to the .RTtooltip {height: 300px} or use % instead of px. If you use % you can set a maxWidth just like on the width.

if the verse is long the text in the tooltip is scrollable. You just don’t get scroll bars and I don’t see a way to turn them on. It may be different for you because I am working in an app.

Bob Diebel

https://community.logos.com/discussion/comment/1220463#Comment_1220463

With the help of you all I have been able to get a good sized tip with large font and colour control.

My next, and maybe last hurtle is to get more words into the ref. It stops at a verse or two.

I would really like to get more words by default, maybe shrink font, then, maybe have a slider bar on the right to get more.

Is there any way to make either happen.

On a similar vein, my son helped me get things working on an image file with coordinates.

https://truthrightlydivided.ca/wp2/wp-content/uploads/2022/09/TwoRoadsKJV-responsiveCD.html

The tooltip box size increases, then, if required the font size decreases, then, if required, a slider appears on the right.

This would be great to see in Reftagger!

All help very much appreciated

Bob Diebel

https://community.logos.com/discussion/comment/1187003#Comment_1187003

Any update on this?

Could the request be monitored for size and adjust the font and popup size to match:

See https://truthrightlydivided.ca/wp2/wp-content/uploads/2022/09/TwoRoadsKJV-responsiveCD.html

Thanx,"

Bob Diebel

https://community.logos.com/discussion/comment/1263772#Comment_1263772

Please, anyone who can help! Reftagger is great, but in some cases cannot even display a single verse completely.

(i.e.2 Kings 22:13) How can I get it to display more words?

All help much appreciated.