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?

edited Mar 25 at 15:11

Derk Jan Speelman

3,2101 gold badge13 silver badges31 bronze badges

asked Mar 25 at 14:52

Robin

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.

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

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

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?

edited Mar 25 at 15:11

Derk Jan Speelman

3,2101 gold badge13 silver badges31 bronze badges

asked Mar 25 at 14:52

Robin

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.

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

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

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?

edited Mar 25 at 15:11

Derk Jan Speelman

3,2101 gold badge13 silver badges31 bronze badges

asked Mar 25 at 14:52

Robin

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

edited Mar 25 at 15:11

Derk Jan Speelman

3,2101 gold badge13 silver badges31 bronze badges

asked Mar 25 at 14:52

Robin

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

Robin

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

asked Mar 25 at 14:52

Robin

35 bronze badges

asked Mar 25 at 14:52

Robin

35 bronze badges

asked Mar 25 at 14:52

Robin

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.

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

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

add a comment |

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

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

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

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

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 Sharif

6514 silver badges15 bronze badges

add a comment |

<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 Ghookas

854 bronze badges

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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 Sharif

6514 silver badges15 bronze badges

add a comment |

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 Sharif

6514 silver badges15 bronze badges

add a comment |

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 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 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

answered Mar 25 at 15:12

Adnan Sharif

6514 silver badges15 bronze badges

answered Mar 25 at 15:12

Adnan Sharif

6514 silver badges15 bronze badges

answered Mar 25 at 15:12

Adnan Sharif

6514 silver badges15 bronze badges

add a comment |

<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 Ghookas

854 bronze badges

add a comment |

<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 Ghookas

854 bronze badges

add a comment |

<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 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 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

answered Mar 25 at 15:10

Razmik Ghookas

854 bronze badges

answered Mar 25 at 15:10

Razmik Ghookas

854 bronze badges

answered Mar 25 at 15:10

Razmik Ghookas

854 bronze badges

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Styjun

2 Answers
2

2 Answers
2

2 Answers
2

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

2 Answers 2

2 Answers 2

2 Answers 2

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

2 Answers
2

2 Answers
2

2 Answers
2