Hello. I want to add a tooltip just such using styles. Everything would be fine, but I'm interested in how to add a small corner to the bottom. I tried using the online service , but it does not come out ..

.compare.question:before { content: "\f059"; font-family: 'fontawesome'; font-size: 24px; } .compare.question:after { content: ""; } .compare.question:hover::after { content: attr(data-title); background-color: #e7e2e2; padding: 8px; width: 120px; color: #696e6e; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: absolute; border-style: solid; border-width: 7px 7px 0 7px; border-color: #e7e2e2 transparent transparent transparent; left: -80%; top: -100%; font-size: 12px; z-index: 999; } 
 <a href="#" class="compare question" data-title="Задать вопрос"></a>

  • This will help: habrahabr.ru/post/126207 - Sergey Snegirev
  • @Sergey Snegirev and what will help? Have you ever looked at the context of the question or immediately poke a link? - John
  • There, the Russian language describes how to "add a small corner to the bottom." Of course, not for those who love SO for what they write to him all the code. - Sergey Snegirev pm
  • @Sergey Snegirev that the link is in Russian, the answer to the question of how to DRAW A Corner, and not how to ADD - catch the difference? I know how to draw a corner myself - for this there are services about one of which I mentioned. My case is not trivial, if you noticed it and what kind of code are you talking about? Do I really ask a lot? - for knowledgeable people, this is a couple of lines of code to help - Vasya

1 answer 1

Something like this

 body { margin: 90px; text-align: center; } .question { position: relative; z-index: 2; cursor: pointer; font-size: 24px; } .question:before, .question:after { visibility: hidden; opacity: 0; pointer-events: none; } .question:before { content: attr(data-tooltip); position: absolute; bottom: 110%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #E7E2E2; color: #000; text-align: center; font-size: 14px; line-height: 1.2; } .question:after { content:" "; position: absolute; bottom: 110%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #E7E2E2; border-right: 5px solid transparent; border-left: 5px solid transparent; font-size: 0; line-height: 0; } .question:hover:before, .question:hover:after { visibility: visible; opacity: 1; } 
 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <a href="#" class="question" data-tooltip="Задать вопрос"> <i class="fa fa-question-circle"></i> </a>

Feeddle

Example 2 (adding a triangle)

 div { background: #E7E2E2; color: #000; font-size: 18px; padding: 10px 20px; position: relative; display: inline-block; border-radius: 10px; } div:after { content:''; position: absolute; left: 50%; bottom: -26px; margin-left: -16px; border: 16px solid transparent; border-top: 10px solid #E7E2E2; } 
 <div>Задать вопрос</div>

  • already better but the fact that I have a link, and not a div is still half the trouble, the real tin is manifested in the fact that there is no text in the link itself, the properties: before are occupied by the icon, but: after redefining and I don’t know how to get around this yet ... - John
  • Everything is cool! Thanks! The only time I had <i class="fa fa-question-circle"></i> was designed as a question:before {content: "\f059"; font-family: 'fontawesome';} question:before {content: "\f059"; font-family: 'fontawesome';} can you somehow do something so as not to change the html structure or in this case in any way? - John