How to make empty span's hoverable?
I have a series of spans that all have tooltips that should be displayed if you hover over the span area. Sometimes a span will not have a value. The resulting display will be some white space where the span is meant to be that can not be hovered for the tooltip. This is understandable because the span ends up being 0x0 pixels.
All of that considered, is there any way to make this whitespace between my "|" hoverable for the tooltips without adding extra whitespace?
I tried some changes involving making these spans inline-block which does keep them in order but they still are not hoverable unless I add some min-width and min-height attribute which adds extra white space I don't want.
Probably easiest to just check this jfiddle - http://jsfiddle.net/en69wxgj/1/
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
html css bootstrap-4
edited Nov 14 '18 at 2:22
Homam
192
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
add a comment |
I have a series of spans that all have tooltips that should be displayed if you hover over the span area. Sometimes a span will not have a value. The resulting display will be some white space where the span is meant to be that can not be hovered for the tooltip. This is understandable because the span ends up being 0x0 pixels.
All of that considered, is there any way to make this whitespace between my "|" hoverable for the tooltips without adding extra whitespace?
I tried some changes involving making these spans inline-block which does keep them in order but they still are not hoverable unless I add some min-width and min-height attribute which adds extra white space I don't want.
Probably easiest to just check this jfiddle - http://jsfiddle.net/en69wxgj/1/
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
html css bootstrap-4
edited Nov 14 '18 at 2:22
Homam
192
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
I think you need to use your method of display: inline-block and min-width: 1em, but you can reduce the spaces between span elements by writing all code in one line.
– Michał Dąbrowski
Nov 14 '18 at 1:01
add a comment |
I have a series of spans that all have tooltips that should be displayed if you hover over the span area. Sometimes a span will not have a value. The resulting display will be some white space where the span is meant to be that can not be hovered for the tooltip. This is understandable because the span ends up being 0x0 pixels.
All of that considered, is there any way to make this whitespace between my "|" hoverable for the tooltips without adding extra whitespace?
I tried some changes involving making these spans inline-block which does keep them in order but they still are not hoverable unless I add some min-width and min-height attribute which adds extra white space I don't want.
Probably easiest to just check this jfiddle - http://jsfiddle.net/en69wxgj/1/
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
html css bootstrap-4
edited Nov 14 '18 at 2:22
Homam
192
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
I have a series of spans that all have tooltips that should be displayed if you hover over the span area. Sometimes a span will not have a value. The resulting display will be some white space where the span is meant to be that can not be hovered for the tooltip. This is understandable because the span ends up being 0x0 pixels.
All of that considered, is there any way to make this whitespace between my "|" hoverable for the tooltips without adding extra whitespace?
I tried some changes involving making these spans inline-block which does keep them in order but they still are not hoverable unless I add some min-width and min-height attribute which adds extra white space I don't want.
Probably easiest to just check this jfiddle - http://jsfiddle.net/en69wxgj/1/
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip"
title="Test Tip">
</span>
|
html css bootstrap-4
html css bootstrap-4
edited Nov 14 '18 at 2:22
Homam
192
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
edited Nov 14 '18 at 2:22
Homam
192
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
edited Nov 14 '18 at 2:22
Homam
192
edited Nov 14 '18 at 2:22
Homam
192
edited Nov 14 '18 at 2:22
Homam
192
192
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
asked Nov 14 '18 at 0:42
Major MajorMajor Major
9241121
9241121
I think you need to use your method of display: inline-block and min-width: 1em, but you can reduce the spaces between span elements by writing all code in one line.
– Michał Dąbrowski
Nov 14 '18 at 1:01
add a comment |
I think you need to use your method of display: inline-block and min-width: 1em, but you can reduce the spaces between span elements by writing all code in one line.
– Michał Dąbrowski
Nov 14 '18 at 1:01
I think you need to use your method of display: inline-block and min-width: 1em, but you can reduce the spaces between span elements by writing all code in one line.
– Michał Dąbrowski
Nov 14 '18 at 1:01
I think you need to use your method of display: inline-block and min-width: 1em, but you can reduce the spaces between span elements by writing all code in one line.
– Michał Dąbrowski
Nov 14 '18 at 1:01
add a comment |
3 Answers
3
active
oldest
votes
Have you considered injecting an invisible text with no size? It does add a bit of extra space though.
.interactive-field::before
content: "x";
visibility: hidden;
font-size: 0px
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
I like your idea! With one line code and.interactive-field display: inline-block; min-width: 0.5em;it works great. And i think to replace "x" with " "
– Michał Dąbrowski
Nov 14 '18 at 1:18
I ended up removing the font-size: 0px because that made it have no width still on my implementation, I added a width: 1em and this looks good now. Thank you
– Major Major
Nov 15 '18 at 2:53
add a comment |
I have tried a solution using letter spacing and :before pseudo element
You can check the comparison between the original version and my version here - http://jsfiddle.net/en69wxgj/40/
Steps involved:
1. Reduce letter spacing between the elements
.parent
letter-spacing:-1px;
.interactive-field2
letter-spacing:0px;
I have created a parent to reduce the letter spacing between elements and have retained the letter spacing of the text
2. Add a :before pseudo element
.interactive-field2:before
display:inline-block;
content:"";
For now, it adds a pseudo element to all the spans. You can use JS to only define pseudo elements for the spans with no content in them.
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
add a comment |
This is a solution using flex model. You can set the container's width.
$("body").tooltip(
selector: '[data-toggle="tooltip"]'
);.span-area
background: #f0f;
display: flex;
flex-flow: row nowrap;
.span-area span
display: inline-flex;
width: 100%;
flex-grow: 1;
justify-content: center;
<br>
<br>
<br>
<div class="span-area">
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div>answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291557%2fhow-to-make-empty-spans-hoverable%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Have you considered injecting an invisible text with no size? It does add a bit of extra space though.
.interactive-field::before
content: "x";
visibility: hidden;
font-size: 0px
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
I like your idea! With one line code and.interactive-field display: inline-block; min-width: 0.5em;it works great. And i think to replace "x" with " "
– Michał Dąbrowski
Nov 14 '18 at 1:18
I ended up removing the font-size: 0px because that made it have no width still on my implementation, I added a width: 1em and this looks good now. Thank you
– Major Major
Nov 15 '18 at 2:53
add a comment |
Have you considered injecting an invisible text with no size? It does add a bit of extra space though.
.interactive-field::before
content: "x";
visibility: hidden;
font-size: 0px
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
I like your idea! With one line code and.interactive-field display: inline-block; min-width: 0.5em;it works great. And i think to replace "x" with " "
– Michał Dąbrowski
Nov 14 '18 at 1:18
I ended up removing the font-size: 0px because that made it have no width still on my implementation, I added a width: 1em and this looks good now. Thank you
– Major Major
Nov 15 '18 at 2:53
add a comment |
Have you considered injecting an invisible text with no size? It does add a bit of extra space though.
.interactive-field::before
content: "x";
visibility: hidden;
font-size: 0px
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
Have you considered injecting an invisible text with no size? It does add a bit of extra space though.
.interactive-field::before
content: "x";
visibility: hidden;
font-size: 0px
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
edited Nov 14 '18 at 1:11
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
answered Nov 14 '18 at 1:06
customcommandercustomcommander
1,417819
1,417819
I like your idea! With one line code and.interactive-field display: inline-block; min-width: 0.5em;it works great. And i think to replace "x" with " "
– Michał Dąbrowski
Nov 14 '18 at 1:18
I ended up removing the font-size: 0px because that made it have no width still on my implementation, I added a width: 1em and this looks good now. Thank you
– Major Major
Nov 15 '18 at 2:53
add a comment |
I like your idea! With one line code and.interactive-field display: inline-block; min-width: 0.5em;it works great. And i think to replace "x" with " "
– Michał Dąbrowski
Nov 14 '18 at 1:18
I ended up removing the font-size: 0px because that made it have no width still on my implementation, I added a width: 1em and this looks good now. Thank you
– Major Major
Nov 15 '18 at 2:53
I like your idea! With one line code and
.interactive-field display: inline-block; min-width: 0.5em; it works great. And i think to replace "x" with " "– Michał Dąbrowski
Nov 14 '18 at 1:18
I like your idea! With one line code and
.interactive-field display: inline-block; min-width: 0.5em; it works great. And i think to replace "x" with " "– Michał Dąbrowski
Nov 14 '18 at 1:18
I ended up removing the font-size: 0px because that made it have no width still on my implementation, I added a width: 1em and this looks good now. Thank you
– Major Major
Nov 15 '18 at 2:53
I ended up removing the font-size: 0px because that made it have no width still on my implementation, I added a width: 1em and this looks good now. Thank you
– Major Major
Nov 15 '18 at 2:53
add a comment |
I have tried a solution using letter spacing and :before pseudo element
You can check the comparison between the original version and my version here - http://jsfiddle.net/en69wxgj/40/
Steps involved:
1. Reduce letter spacing between the elements
.parent
letter-spacing:-1px;
.interactive-field2
letter-spacing:0px;
I have created a parent to reduce the letter spacing between elements and have retained the letter spacing of the text
2. Add a :before pseudo element
.interactive-field2:before
display:inline-block;
content:"";
For now, it adds a pseudo element to all the spans. You can use JS to only define pseudo elements for the spans with no content in them.
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
add a comment |
I have tried a solution using letter spacing and :before pseudo element
You can check the comparison between the original version and my version here - http://jsfiddle.net/en69wxgj/40/
Steps involved:
1. Reduce letter spacing between the elements
.parent
letter-spacing:-1px;
.interactive-field2
letter-spacing:0px;
I have created a parent to reduce the letter spacing between elements and have retained the letter spacing of the text
2. Add a :before pseudo element
.interactive-field2:before
display:inline-block;
content:"";
For now, it adds a pseudo element to all the spans. You can use JS to only define pseudo elements for the spans with no content in them.
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
add a comment |
I have tried a solution using letter spacing and :before pseudo element
You can check the comparison between the original version and my version here - http://jsfiddle.net/en69wxgj/40/
Steps involved:
1. Reduce letter spacing between the elements
.parent
letter-spacing:-1px;
.interactive-field2
letter-spacing:0px;
I have created a parent to reduce the letter spacing between elements and have retained the letter spacing of the text
2. Add a :before pseudo element
.interactive-field2:before
display:inline-block;
content:"";
For now, it adds a pseudo element to all the spans. You can use JS to only define pseudo elements for the spans with no content in them.
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
I have tried a solution using letter spacing and :before pseudo element
You can check the comparison between the original version and my version here - http://jsfiddle.net/en69wxgj/40/
Steps involved:
1. Reduce letter spacing between the elements
.parent
letter-spacing:-1px;
.interactive-field2
letter-spacing:0px;
I have created a parent to reduce the letter spacing between elements and have retained the letter spacing of the text
2. Add a :before pseudo element
.interactive-field2:before
display:inline-block;
content:"";
For now, it adds a pseudo element to all the spans. You can use JS to only define pseudo elements for the spans with no content in them.
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
answered Nov 14 '18 at 6:53
vishwaovivishwaovi
346
346
add a comment |
add a comment |
This is a solution using flex model. You can set the container's width.
$("body").tooltip(
selector: '[data-toggle="tooltip"]'
);.span-area
background: #f0f;
display: flex;
flex-flow: row nowrap;
.span-area span
display: inline-flex;
width: 100%;
flex-grow: 1;
justify-content: center;
<br>
<br>
<br>
<div class="span-area">
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div>answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
add a comment |
This is a solution using flex model. You can set the container's width.
$("body").tooltip(
selector: '[data-toggle="tooltip"]'
);.span-area
background: #f0f;
display: flex;
flex-flow: row nowrap;
.span-area span
display: inline-flex;
width: 100%;
flex-grow: 1;
justify-content: center;
<br>
<br>
<br>
<div class="span-area">
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div>answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
add a comment |
This is a solution using flex model. You can set the container's width.
$("body").tooltip(
selector: '[data-toggle="tooltip"]'
);.span-area
background: #f0f;
display: flex;
flex-flow: row nowrap;
.span-area span
display: inline-flex;
width: 100%;
flex-grow: 1;
justify-content: center;
<br>
<br>
<br>
<div class="span-area">
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div>answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
This is a solution using flex model. You can set the container's width.
$("body").tooltip(
selector: '[data-toggle="tooltip"]'
);.span-area
background: #f0f;
display: flex;
flex-flow: row nowrap;
.span-area span
display: inline-flex;
width: 100%;
flex-grow: 1;
justify-content: center;
<br>
<br>
<br>
<div class="span-area">
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div> $("body").tooltip(
selector: '[data-toggle="tooltip"]'
);.span-area
background: #f0f;
display: flex;
flex-flow: row nowrap;
.span-area span
display: inline-flex;
width: 100%;
flex-grow: 1;
justify-content: center;
<br>
<br>
<br>
<div class="span-area">
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div> $("body").tooltip(
selector: '[data-toggle="tooltip"]'
);.span-area
background: #f0f;
display: flex;
flex-flow: row nowrap;
.span-area span
display: inline-flex;
width: 100%;
flex-grow: 1;
justify-content: center;
<br>
<br>
<br>
<div class="span-area">
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div>answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
answered Nov 14 '18 at 1:09
Pablo DardePablo Darde
1,47511527
1,47511527
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291557%2fhow-to-make-empty-spans-hoverable%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think you need to use your method of display: inline-block and min-width: 1em, but you can reduce the spaces between span elements by writing all code in one line.
– Michał Dąbrowski
Nov 14 '18 at 1:01