1

I have default bootstrap tooltip with custom styles for arrows that have only font color and size, nothing special with paddings or margin.

If I have short text - it's ok: short text

If it's a littile longer - arrow goes down through the tooltip: longer one

another common problem - if tooltip position is near the end of the page/window: enter image description here

There are the same styles for each tooltip.

I've tried to fix it by different ways based on answers from stackoverflow, but it wasn't helpful. Please, help me to understand this strange behaviour. What style should I use for arrows to make it fixed at the border of tooltip?

PS: another detail - if I will swap "hide people" and "show feedback" tooltips - it becomes ok. So, probably it depends on tooltip position too.

Community
  • 1
  • 1
TiSer
  • 775
  • 3
  • 11
  • 30
  • 1
    try to give it a higher width it should work – Youness Sep 09 '14 at 09:34
  • @Youness if you meant arrow - it is not. If we are talking about tooltips - yes, it will fix my problem arrows, but it will crash another ones. And making individual class for each tooltip it's not a good behaviour :) – TiSer Sep 09 '14 at 09:39
  • can you show the arrow css? – Punitha Subramani Sep 09 '14 at 09:40
  • @punithasubramaniv sure. As I said, nothing special: http://pastie.org/private/n4ml8j5cl85wktwujdxiuw – TiSer Sep 09 '14 at 09:43
  • How can I run? And, then I want tooltip before after code like I posted for u an example – Punitha Subramani Sep 09 '14 at 09:48
  • @Youness but to use max-width exactly for main .tooltip class is really helpful! Thanks! Problem that remains is tooltip at the corner, it centered his arrow incorrect. – TiSer Sep 09 '14 at 09:49
  • @Youness your hint was helpful. Add please it to answer and I will approve it. – TiSer Oct 03 '14 at 14:54

2 Answers2

0

This what I expected!

Can you try it? and post your after/before pseudo code

reference

http://cssdeck.com/labs/pure-css-tooltip-with-arrow

    .tooltip:hover:before {
        background: #111;
        background: rgba(0,0,0,.8);
        border-radius: .5em;
        bottom: 1.35em;
        color: #fff;
        content: attr(title);
        display: block;
        left: 1em;
        padding: .3em 1em;
        position: absolute;
        text-shadow: 0 1px 0 #000;
        white-space: nowrap;
        z-index: 98;
    }

    .tooltip:hover:after {
        border: solid;
        border-color: #111 transparent;
        border-color: rgba(0,0,0,.8) transparent;
        border-width: .4em .4em 0 .4em;
        bottom: 1em;
        content: "";
        display: block;
        left: 2em;
        position: absolute;
        z-index: 99;
    }
Punitha Subramani
  • 1,467
  • 1
  • 8
  • 6
  • just use default bootstrap tooltip, like this: http://stackoverflow.com/questions/9446318/bootstrap-tooltips-not-working – TiSer Sep 09 '14 at 09:54
0

Thanks to @Youness,

max-width exactly for main .tooltip class is helpful.

Community
  • 1
  • 1
TiSer
  • 775
  • 3
  • 11
  • 30