CODEWITHSUNDEEP
javascriptcssdomshadow-dom
David
David

Reputation: 560

How get dimension of HTML shadow element via JavaScript

I'm displaying tooltips via pure CSS3 but the only problem I have is that the content of the tooltips has really different lengths. Some of them are just 1 line long, others up to 4 lines.

Now are these tooltips Shadow DOM elements, so how could I get the (different) height of these tooltips via JavaScript (or a pure CSS solution would be better (maybe CSS calc?)) to adjust the margin that all tooltips have the margin from the anchor element?

HTML:

<a href="#" data-title="This is one example tooltip">Test #1</a>
<a href="#" data-title="This is one example tooltip - This is one example tooltip [...]">Test #2</a>

CSS:

a:before {
    content: attr(data-title);
    position: absolute;
    background: blue;
    padding: 7px 10px;
    width: 440px;
    max-height: 72px;
    text-align: left;
    line-height: 18px;
    margin: 0 0 0 0;
    opacity: 0;
    color: white;
    transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}

a:hover:before {
    opacity: 1;
    margin-top: -40px;
    transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}

Live demo: http://jsfiddle.net/qq3YJ/

Upvotes: 4

Views: 1621

Answers (1)

outcoldman
outcoldman

Reputation: 11832

This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/

This is what I did:

  1. Make a relative, so this means that a:before element will have position relative to his parent a.

  2. To place tooltip right under links I used bottom attribute instead of margin-top. Because I used position: relative to link - this means that bottom:0 for example it is when tooltip has it's bottom border right on the bottom border of the parent a.

  3. Because you want to see tooltips under links - in :hover I changed bottom to 1.4em, which is little bit under text (.4em will be distance between them).

  4. Because you want to see it animated I changed transition to include bottom property instead of 'margin-top'.

  5. The last problem was that because you had :before element always in html flow - in case of second tooltip (which is big) - it occupies more space than a, so when you hover it (not the link) - you can see it. So I also added visibility: hidden to :before element to make sure that if mouse will be over it you will not see it.

Upvotes: 1

Related Questions