Need HTML? Want to use CSS (cascading style sheets)? Need a touch of help with Javascript, Java, or other coding language? Whether through SBI!'s BlockBuilder 2 or your own HTML Editor, post here. Push the envelope. Learn basics (ex., how to format your text, add tables) or go as "out there" as you like. Problems? Questions? Help and be helped.

Moderators: Laura from Chautauqua, Will from Los Ojos

#1391633 by Will from Los Ojos
Wed Jan 31, 2018 4:00 pm
Hi David,

Here's what it looks like in my Chrome.

Image

The behavior of the native tooltip is different depending on which browser you use.

Earlier someone mentioned CodeCanyon. I went and took a look.

Here is a link to a page that is filtered for tooltips that use CSS only to display their properties.
https://codecanyon.net/category/css?tags=tooltip

Take a look through to see what the screen shots and videos are like. Number of sales is also useful information, and the comments. Some have videos that shows the tooltips in operation.

I picked 2 at random here.

https://codecanyon.net/item/pure-css3-t ... 3?s_rank=7

https://codecanyon.net/item/full-css3-t ... ?s_rank=20

Will
#1391778 by David from Montana
Fri Feb 02, 2018 9:58 pm
Will from Los Ojos wrote:Take a look through to see what the screen shots and videos are like. Number of sales is also useful information, and the comments. Some have videos that shows the tooltips in operation.
Will

Thanks, Will I did purchase one, but the instructions are pretty poor. Since I don't know coding, other than copy and paste, I don't know how to follow the "instructions".

“First, attach the external CSS files: tooltips_main.css and tooltips_styles.css to your web page e.g.:

<link rel="stylesheet" type="text/css" href="styles/tooltips_main.css"/>
<link rel="stylesheet" type="text/css" href="styles/tooltips_styles.css"/>
I don't even know what "attach" to your page means.

It says “you can…”, but doesn’t say how: “You can reduce tooltips_styles.css file size by removing styles that aren’t used on the page. Doing it please make sure you have an intact copy of the original files.”

“Now you can attach tooltips to the different page elements in your HTML document e.g.: ” I don't know how to do that, either. I do have several lines of coding for that. I submitted these questions to them, but no response yet.
#1391908 by Debs from SiteSell
Mon Feb 05, 2018 11:55 am

Take this code and put into the Sitewide Box of the Head section of one of your pages. If you also want these on C2.0 pages, also put it in the C2.0 template.

Code: Select all<link rel="stylesheet" type="text/css" href="support-files/tooltips_main.css"/>
<link rel="stylesheet" type="text/css" href="support-files/tooltips_styles.css"/>


Notice I changed the file location to fit SBI! sites.

Save (build) the page.

Upload the 2 files via Quick Upload It!

That should do it for that part. Anything else?

Debs
#1391954 by David from Montana
Mon Feb 05, 2018 9:32 pm
Sounds easy, Debs. I appreciate it. I will try it soon!
#1391960 by David from Montana
Mon Feb 05, 2018 11:03 pm
Instructions say, "Now you can attach tooltips to the different page elements in your HTML document eg:"

Then it lists these:

<a class="qlabs_tooltip_top qlabs_tooltip_style_1" href="#"><span>Tooltip Text</span>Some Text</a>
<p class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</p>
<h1 class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</h1>
<div class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</div>
<div class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span><img src="#" alt="image"/></div>
#1392010 by Debs from SiteSell
Tue Feb 06, 2018 6:10 pm
Code: Select all<a class="qlabs_tooltip_top qlabs_tooltip_style_1" href="#"><span>Tooltip Text</span>Some Text</a>
<p class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</p>
<h1 class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</h1>
<div class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</div>
<div class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span><img src="#" alt="image"/></div>


Basically where it says "Tooltip Text" you put in the text you want to appear. However, I'm not sure why there are so many variations. Were there any instructions?

Debs
#1392098 by David from Montana
Wed Feb 07, 2018 3:45 pm
No, Debs, there weren't any other instructions. I left a request for support that is promised in 24 hours, but that hasn't happened. that is why I turned to the forums.
#1392121 by Laura from Golden
Wed Feb 07, 2018 6:03 pm
Code: Select all<a class="qlabs_tooltip_top qlabs_tooltip_style_1" href="#"><span>Tooltip Text</span>Some Text</a>
<p class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</p>
<h1 class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</h1>
<div class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</div>
<div class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span><img src="#" alt="image"/></div>


These are all different examples of how you could use it. So use one or the other depending on your purpose.

I'm guessing that you'll mostly use it for some text inside of paragraphs, so you would use this one...

Code: Select all<p class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</p>


If you wanted some text inside of a headline, you'd use this one...

Code: Select all<h1 class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</h1>


Changing h1 (both) to h2, or h3, or h4 as necessary.

Best regards,
Laura
SiteSell Support Team
#1392188 by David from Montana
Thu Feb 08, 2018 3:23 pm
I agree, Debs, but I don't know who else to try. Thanks, Laura. I'll try it.
#1392432 by David from Montana
Mon Feb 12, 2018 11:07 pm

[quote="Laura from SiteSell Support"]

I'm guessing that you'll mostly use it for some text inside of paragraphs, so you would use this one...

Code: Select all<p class="qlabs_tooltip_top qlabs_tooltip_style_1"><span>Tooltip Text</span>Some Text</p>


Well, that code doesn't appear to accomplish anything!
#1392493 by David from Montana
Tue Feb 13, 2018 4:23 pm
Well, I didn't leave it there, because it didn't do what it was supposed to do. It just looks like text with no effects on it at all. I just put it on my page in an html block to check the code, but didn't build it. Not sure what I'm supposed to do with the code. I really appreciate the help!
#1392503 by Mary from Mico
Tue Feb 13, 2018 5:20 pm
Hi David.

I had remembered that Nori used to have sweet little yellow bubbles, yet on scanning her home page I did not find them, so I did not post here. (Maybe that's a sign?)

That was about an half an hour ago.

Yet just now I hovered over something here in the forum (promptly forgot what it was) and saw a bubble that was black with white text; so I searched recent posts for "elk" to be able to let you know that perhaps you could find the code here in the forum codes.

Otherwise, is there a site that uses what you want? Can you View Source (Ctrl U) their pages or perhaps write the webmaster for his ideas?

'Just an idea.

Mary
#1392534 by David from Montana
Wed Feb 14, 2018 4:26 am
It was recommended that I purchase my own code, rather than using other people's codes that they paid someone to provide. That where I got to this point. Lots of websites use those bubbles. I'm not following you regarding searching for "elk".
Similar Topics Statistics Last post
Why can't/how can I get text to wrap left/right around my adsense responsive ad code?
by John from Midway Park Sat Aug 05, 2017 1:48 pm
2 Replies
394 Views
by John from Midway Park
Sun Aug 06, 2017 2:21 pm
Centring the affiliate image link code - help!
by Georgia from Tweed Heads Mon Jan 15, 2018 12:36 am
7 Replies
303 Views
by Juri from plainlight.com
Tue Jan 16, 2018 7:13 pm
Need coding to remove navbar and side bar from Cityscape template
by Stonehouse from Marshfield Sun Feb 26, 2017 7:49 pm
3 Replies
989 Views
by Juri from plainlight.com
Sun Feb 26, 2017 9:30 pm
Business Directory - code or leave as is?
by Leah from Emu Creek Thu Oct 19, 2017 4:24 am
2 Replies
229 Views
by Debs from SiteSell
Thu Oct 19, 2017 9:29 pm
Code for linking to C2 Sumissions (Nimble wants to know...)
by Scott from dogvittles.com Sat Jan 06, 2018 2:32 pm
4 Replies
239 Views
by Scott from dogvittles.com
Wed Jan 10, 2018 2:17 am

Users browsing this forum: No registered users and 5 guests