How can I combine tooltip tags and paragraph margin tags in a paragraph? [duplicate]Why <p> tag can't contain <div> tag inside it?List of HTML5 elements that can be nested inside P element?How do you disable browser Autocomplete on web form field / input tag?How do I wrap text in a pre tag?How can I know which radio button is selected via jQuery?How do I combine a background-image and CSS3 gradient on the same element?How can I transition height: 0; to height: auto; using CSS?How can I set the default value for an HTML <select> element?How to add a tooltip to a divRemove space between 2 tables HTML CSS and image removes background imageCannot display HTML stringCSS position:fixed is working for the header but not for the footer
/etc/hosts not working
13th chords on guitar
Can dual citizens open crypto exchange accounts where U.S. citizens are prohibited?
Is it okay to submit a paper from a master's thesis without informing the advisor?
Is ALTER TABLE ... DROP COLUMN really a metadata only operation?
Origin of the convolution theorem
Copy group of files (Filename*) to backup (Filename*.bak)
How to stop the sales department from selling functionalities that don't exist
By RAW, how can Prestidigitation create sound?
Cup and Trade: The Perfect Nutmeg Soup
On what to compliment someone with anorexia in order to improve their body image?
When casting a spell with a long casting time, what happens if you don't spend your action on a turn to continue casting?
"I am [the / an] owner of a bookstore"?
How did they film the Invisible Man being invisible, in 1933?
Why were the first airplanes "backwards"?
Sharing referee/AE report online to point out a grievous error in refereeing
Bin Packing with Relational Penalization
Story where diplomats use codes for emotions
Closest Proximity of Oceans to Freshwater Springs
What game is this character in the Pixels movie from?
Word ending in "-ine" for rat-like
What is the Japanese name for the conventional shoelace knot?
Discworld quote about an "old couple" who having said everything to each other, can finally go about living their lives
How did Lefschetz do mathematics without hands?
How can I combine tooltip tags and paragraph margin tags in a paragraph? [duplicate]
Why <p> tag can't contain <div> tag inside it?List of HTML5 elements that can be nested inside P element?How do you disable browser Autocomplete on web form field / input tag?How do I wrap text in a pre tag?How can I know which radio button is selected via jQuery?How do I combine a background-image and CSS3 gradient on the same element?How can I transition height: 0; to height: auto; using CSS?How can I set the default value for an HTML <select> element?How to add a tooltip to a divRemove space between 2 tables HTML CSS and image removes background imageCannot display HTML stringCSS position:fixed is working for the header but not for the footer
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
-1
This question already has an answer here:
Why <p> tag can't contain <div> tag inside it?
5 answers
List of HTML5 elements that can be nested inside P element?
1 answer
I'm having problems combining tooltip tags and paragraph margin settings in a paragraph.
This is what I've got at the moment:
.tooltip
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>It displays like 3 paragraphs like a new paragraph starts at the tooltip.
What can I do to have this displayed as two paragraphs?
html css
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
marked as duplicate by Paulie_D, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 25 at 15:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
-1
This question already has an answer here:
Why <p> tag can't contain <div> tag inside it?
5 answers
List of HTML5 elements that can be nested inside P element?
1 answer
I'm having problems combining tooltip tags and paragraph margin settings in a paragraph.
This is what I've got at the moment:
.tooltip
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>It displays like 3 paragraphs like a new paragraph starts at the tooltip.
What can I do to have this displayed as two paragraphs?
html css
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
marked as duplicate by Paulie_D, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 25 at 15:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
usespaninstead or make the elementinline
– Temani Afif
Mar 25 at 14:55
what exactly do you mean? what do I need to change in the code?
– Robin
Mar 25 at 15:01
1
divis not a valid child ofp. The browser is trying to fix this mistake by closing thepbefore thedivand opening a newpafter it. Use a span instead.
– Turnip
Mar 25 at 15:11
add a comment |
-1
-1
-1
This question already has an answer here:
Why <p> tag can't contain <div> tag inside it?
5 answers
List of HTML5 elements that can be nested inside P element?
1 answer
I'm having problems combining tooltip tags and paragraph margin settings in a paragraph.
This is what I've got at the moment:
.tooltip
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>It displays like 3 paragraphs like a new paragraph starts at the tooltip.
What can I do to have this displayed as two paragraphs?
html css
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
This question already has an answer here:
Why <p> tag can't contain <div> tag inside it?
5 answers
List of HTML5 elements that can be nested inside P element?
1 answer
I'm having problems combining tooltip tags and paragraph margin settings in a paragraph.
This is what I've got at the moment:
.tooltip
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>It displays like 3 paragraphs like a new paragraph starts at the tooltip.
What can I do to have this displayed as two paragraphs?
This question already has an answer here:
Why <p> tag can't contain <div> tag inside it?
5 answers
List of HTML5 elements that can be nested inside P element?
1 answer
.tooltip
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>.tooltip
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <div class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></div> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>html css
html css
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
edited Mar 25 at 15:11
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
3,2101 gold badge13 silver badges31 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
asked Mar 25 at 14:52
RobinRobin
35 bronze badges
35 bronze badges
marked as duplicate by Paulie_D, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 25 at 15:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Paulie_D, Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Mar 25 at 15:13
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
usespaninstead or make the elementinline
– Temani Afif
Mar 25 at 14:55
what exactly do you mean? what do I need to change in the code?
– Robin
Mar 25 at 15:01
1
divis not a valid child ofp. The browser is trying to fix this mistake by closing thepbefore thedivand opening a newpafter it. Use a span instead.
– Turnip
Mar 25 at 15:11
add a comment |
usespaninstead or make the elementinline
– Temani Afif
Mar 25 at 14:55
what exactly do you mean? what do I need to change in the code?
– Robin
Mar 25 at 15:01
1
divis not a valid child ofp. The browser is trying to fix this mistake by closing thepbefore thedivand opening a newpafter it. Use a span instead.
– Turnip
Mar 25 at 15:11
use
span instead or make the element inline– Temani Afif
Mar 25 at 14:55
use
span instead or make the element inline– Temani Afif
Mar 25 at 14:55
what exactly do you mean? what do I need to change in the code?
– Robin
Mar 25 at 15:01
what exactly do you mean? what do I need to change in the code?
– Robin
Mar 25 at 15:01
1
1
div is not a valid child of p. The browser is trying to fix this mistake by closing the p before the div and opening a new p after it. Use a span instead.– Turnip
Mar 25 at 15:11
div is not a valid child of p. The browser is trying to fix this mistake by closing the p before the div and opening a new p after it. Use a span instead.– Turnip
Mar 25 at 15:11
add a comment |
2 Answers
2
active
oldest
votes
1
I think, the problem you are facing is due to the display of div element. Replace your div element by span element. The problem will be solved!
I have edited your code snippet. Here it is,
.tooltip
position: relative;
display: inline;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
add a comment |
0
<p class="ex1" >
PARAGRAPH-1 TEST
<span class="tooltip">
this is a tooltip
<span class="tooltiptext">
the tooltip shows this text
</span>
</span>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
Just change <div> inside <p> tag to span then you have 2 paragraphs.
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I think, the problem you are facing is due to the display of div element. Replace your div element by span element. The problem will be solved!
I have edited your code snippet. Here it is,
.tooltip
position: relative;
display: inline;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
add a comment |
1
I think, the problem you are facing is due to the display of div element. Replace your div element by span element. The problem will be solved!
I have edited your code snippet. Here it is,
.tooltip
position: relative;
display: inline;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
add a comment |
1
1
1
I think, the problem you are facing is due to the display of div element. Replace your div element by span element. The problem will be solved!
I have edited your code snippet. Here it is,
.tooltip
position: relative;
display: inline;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
I think, the problem you are facing is due to the display of div element. Replace your div element by span element. The problem will be solved!
I have edited your code snippet. Here it is,
.tooltip
position: relative;
display: inline;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>.tooltip
position: relative;
display: inline;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>.tooltip
position: relative;
display: inline;
border-bottom: 1px dotted black;
.tooltip .tooltiptext
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 1px;
padding: 1px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
.tooltip:hover .tooltiptext
visibility: visible;
p.ex1
margin-left: 200px; margin-right: 50px;
<body style="text-align:center;">
<font face="Arial" size="4">
<p class="ex1">
PARAGRAPH-1 TEST <span class="tooltip">this is a tooltip<span class="tooltiptext"> the tooltip shows this text</span></span> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<p class="ex1">
PARAGRAPH-2 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</font>
</body>edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
edited Mar 25 at 15:13
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
answered Mar 25 at 15:12
Adnan SharifAdnan Sharif
6514 silver badges15 bronze badges
6514 silver badges15 bronze badges
add a comment |
add a comment |
0
<p class="ex1" >
PARAGRAPH-1 TEST
<span class="tooltip">
this is a tooltip
<span class="tooltiptext">
the tooltip shows this text
</span>
</span>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
Just change <div> inside <p> tag to span then you have 2 paragraphs.
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
add a comment |
0
<p class="ex1" >
PARAGRAPH-1 TEST
<span class="tooltip">
this is a tooltip
<span class="tooltiptext">
the tooltip shows this text
</span>
</span>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
Just change <div> inside <p> tag to span then you have 2 paragraphs.
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
add a comment |
0
0
0
<p class="ex1" >
PARAGRAPH-1 TEST
<span class="tooltip">
this is a tooltip
<span class="tooltiptext">
the tooltip shows this text
</span>
</span>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
Just change <div> inside <p> tag to span then you have 2 paragraphs.
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
<p class="ex1" >
PARAGRAPH-1 TEST
<span class="tooltip">
this is a tooltip
<span class="tooltiptext">
the tooltip shows this text
</span>
</span>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
Just change <div> inside <p> tag to span then you have 2 paragraphs.
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
edited Mar 25 at 15:12
Derk Jan Speelman
3,2101 gold badge13 silver badges31 bronze badges
3,2101 gold badge13 silver badges31 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
answered Mar 25 at 15:10
Razmik GhookasRazmik Ghookas
854 bronze badges
854 bronze badges
add a comment |
add a comment |
use
spaninstead or make the elementinline– Temani Afif
Mar 25 at 14:55
what exactly do you mean? what do I need to change in the code?
– Robin
Mar 25 at 15:01
1
divis not a valid child ofp. The browser is trying to fix this mistake by closing thepbefore thedivand opening a newpafter it. Use a span instead.– Turnip
Mar 25 at 15:11