Tooltip using css only

Question

I have an application on which I can only change the CSS. e.g.

<p class="abc">My Text</p>

I can only change the abc in the above text or can add another css class along abc. Is there any way to display a tool tip by editing properties of abc in css? I can edit the css file only. Even the tool tip text have to be placed in css or the css can refer it from anywhere else. Any possibility?

What would the tooltip text be? Would it be different for every element / class? — Paulie_D
– Paulie_D, Commented May 1, 2016 at 12:56
Also, if you can change the class, why can't you change the HTML? It's the same thing. Your question is not logical. — Paulie_D
– Paulie_D, Commented May 1, 2016 at 12:58
@Paulie_D Tool tip text would be different for different fields. I can add different classes for each field I need tooltip for. The html is generated by a software which we have no control over. That software however let's us assign classes to elements. — AhmedRana
– AhmedRana, Commented May 1, 2016 at 13:12
Try to make the class name equal to abc" title="tooltip. By the way, if that works, the application isn't protected against XSS attacks. — Mr Lister
– Mr Lister, Commented May 1, 2016 at 13:13

Aziz · Accepted Answer · 2016-05-02 06:59:55Z

9

Can it be done with pure CSS? Yes. However, with JavaScript you get much more control.

body { margin: 3em; }

.tooltip { position: relative; }

.tooltip::before {
  content: "\2003" attr(class); /* print em-space with class text */
  text-indent: -3.9em; /* add negative text offset to hide class name */
  display: inline-block;
  position: absolute; bottom: 50%;
  background: #000; color: #FFF; padding: 5px; border-radius: 5px;
  opacity:0; transition:0.3s; overflow:hidden;
  max-width: 50%; /* avoids very long sentences */
  pointer-events: none; /* prevents tooltip from firing on pseudo hover */
}

.tooltip:hover::before { opacity:1; bottom: 100%; }

<p class="tooltip Tooltip Text">My Text</p>
<p class="tooltip Dolor sit amet bla bla">Lorem Ipsum</p>

Basically I added an em space* and set a negative text-indent with overflow:hidden to hide the first part of text so that tooltip My Text here becomes My Text here. This is a bit hacky and you'll have to be careful of class name conflicts.

* The em-space is used to allow for some left padding.

jsFiddle: https://jsfiddle.net/azizn/gs1ye10r/2/

edited May 2, 2016 at 6:59

answered May 1, 2016 at 13:05

Aziz

7,8233 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AhmedRana Over a year ago

I have a question. If I write a long line of text. It stretches the tooltip. Is it possible to break line in the tooltip or make any section of text bold?

Aziz Over a year ago

@AhmedRana yes - you can add max-width property to the pseduo element - jsfiddle.net/azizn/gs1ye10r/2 I also added pointer-events: none so that the tooltip when fire by accident

AhmedRana Over a year ago

It is working fine in JSFiddle but unfortunately on my css it isn't working (may be due to some other conflicting rule). Thanks a lot anyways!

Aziz Over a year ago

Use the devtools inspector to check which what CSS is being applied. If there is a class in CSS that conflicts you could add the :not pseudo selector, like .hello:not(.tooltip)

AhmedRana Over a year ago

Hi @Aziz Is there a way to use richtext or html in the tooltip. I tried using <br> inside a toolip but it only shows as <br> not a new line

|

mlegg · Accepted Answer · 2016-05-01 13:09:02Z

-3

Look at this page http://www.w3schools.com/css/css_tooltip.asp

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

answered May 1, 2016 at 13:09

mlegg

8226 gold badges19 silver badges37 bronze badges

4 Comments

AhmedRana Over a year ago

Thanks for the help but I cannot add this span tag :(

mlegg Over a year ago

Why can you not do that?

Aziz Over a year ago

@mlegg read the question carefully, OP can only modify the class name in HTML.

mlegg Over a year ago

oh, sorry, missed that

Collectives™ on Stack Overflow

Tooltip using css only

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related