CODEWITHSUNDEEP
htmlcss
user5914666
user5914666

Reputation: 11

How do I make this CSS tooltip behave on all browsers?

I have a tooltip that I'm calling on a web page which works beautifully in Firefox, but nothing else. The page itself is a list of vocabulary words in two columns, with each vocab word containing a hover tooltip with the definition, and all contained within an orange Div. On every browser besides Firefox, triggering the tooltips for words closer to the bottom of the columns causes several formatting issues. The tooltip either splits itself to stay within the Div/unordered list, or the vocab words themselves get shifted around so the tooltip can fit.

Here's the tooltip CSS, and some screen shots in different browsers. I'm not sure if it's an HTML problem regarding the unordered list I use, or if there's something in the tooltip CSS that can be changed. I also tried just adding empty space to the bottom of the div hoping that might be an easy hack, but it doesn't make a difference.

Tooltip CSS:

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   width: 300%;
   min-width:350px;
   max-width:850px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Firefox working

Chrome not working

Upvotes: 0

Views: 451

Answers (2)

Bosworth99
Bosworth99

Reputation: 4234

Not sure what your html looks like, but this is a pretty straightforward task. Your screenshot of the element breaking up is pretty odd.

Take a look at this (working) fiddle, for some clarification / direction :

https://jsfiddle.net/r2ar1Lfb/

One thing to note is that absolutely positioned elements can default to unexpected values, so always be sure to set them, explicitly.

   top:0;
   left:0;

If you still have issues, please post your html.

Update : you seem to have a columns rule in place, and it is causing some wonky behavior. Please post your html and any other css rules that might be affecting this. (Which is a good strategy, here on SO.)

Upvotes: 0

KostaShah
KostaShah

Reputation: 343

I think the problem is caused by the "columns" css rule, which is probably applied to the ul element, or to its ancestor. So the solution can be one of those:
1. The most simple: just remove the columns, let the words go on one column.
2. Use something like "float:left; width:50%" on "li"s instead of columns. So, they will be arranged in 2 columns, by the order will be horizontal.
3. Use a table to make 2 columns.
4. The most complicated: use javascript. In this case you can move all "dropdown-content" elements out of their parents, out of the columned element. And make an onmousemove script, which will calculate the corresponding coordinates, move and show the corresponding dropdown-content element. I would not go this way.

Upvotes: 1

Related Questions