Tooltips are way too big, how can I fix this?

HTML & CSS
1

Can someone tell me why these tooltips are so huge, and if that can be fixed?
What is it that’s causing them to get so big?

https://blankbloggerattempt.blogspot.com/
image

Compared to this:

image

2

It looks like only the svg title tags are the ones effected.

<title>Open</title>

The one player with the title attribute is fine


<div class="jacketc" title="OPEN">
</div>

I remember making a comment about blogger having a problem with the title tag last year. See if you can find that old thread.

Here it is…

1 Like
3

Blogger (or something) is injecting whitespace in your title tag.

When I do a live edit on the html and strip it away the extra space goes away.

On the 2nd image below notice that I left the whitespace above the word “play” and look at the tooltip, see the whitespace at the top only now.

1
1765×511 130 KB

2
2746×468 124 KB

2 Likes
4

Thank you for helping me figure this out.

After I formatted the code inside blogger, which I do because, the editor seems to load up faster, not sure why. But after I do that,

It takes this piece.
<title>Play</title>

And changes it to this after it’s formatted.

                <title>
                  Play
                </title>

I can manually change them all back to this:
<title>Play</title>

And they are all good now.
https://blankbloggerattempt.blogspot.com/

Thank you again.

2 Likes
5

That’s the problem with wysiwyg editors, they start doing stuff you don’t want.

If possible just use your own editor from your local machine and then upload files with your own ftp client. The way you would do it with any typical website.

Of course blogger may not allow you to bypass their File Transfer Protocol, in which case you have to keep an eye on what it does.

6

This is what the editor looks like:

The codes can be put in any way I like.

1005×398 25.2 KB

7

The updated code I’m working with rips out all of the added blogger css, and so the code I’m working with now is all from scratch without any added blogger css codes.

Meaning, the whole blog format, none of that is there, I removed it, and started from a blank page.

This is basically all I’m working with:

I rip out all the original code:

Then I throw this in there to make it blank, then the rest of the code gets added in.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <data:blog.pageTitle/>
  </title>
  <b:skin><![CDATA[
    html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

  ]]></b:skin>
  </head>
  <body>
    <b:section class='main' id='main' showaddelement='yes'/>

<div class='outer'>
  <div class='tcell'>

      </div>
    </div>
  </div>
</div>

  </body>
</html>
8

Okay, it sounds like you are able to control things better than I thought.:grinning:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.