Firefox 5.0 - Tooltips - Completely Recentengle (Answered)
  • Heya, i know the information on this will be a little loose but alas i dont have much to work with :)

    I use stuff like -moz-border-radius: 0px !important; but i can when i zoom in i can still gaps in the corner of the tooltips border. Any ideas on how i could make it completely straight ??

    image
    919 x 98 - 5K
  • Note: When asking for help about style development, put the topic under the "Style Development" category for convenience to others (consequently may get you a faster response)

    Use this.

    tooltip {-moz-appearance: none !important;}
  • i just tryed that code, and the edges are still rounded "ie missing a pixel in each corner" :(
  • Try using border-radius, not -moz-border radius.

    "border-radius: 0 !important;"

    IF that doesn't work, try combining with border: 1px solid black !important;}

    tooltip {

    -moz-appearance: none !important;
    border-radius: 0 !important;
    border: 1px solid black !important;}

    (I'm guessing here)

    Edit: Never mind, tried it, not working for me either.
  • I recall something about this (well, it was about tabs, i believe) in one of the nightlies threads. I believe, they use image (!) for those corners. Might need to search mockups a bit or something.

    EDIT: wait! just looked at my style here, i get something like that too but it's hardly visible so i never really paid attention:

    image
    701 x 101 - 54K
  • Pretty sure it's a characteristic of the user's operating system.

    Windows XP doesn't have rounded tooltips, WIndows 7 does.

    Setting some properties to their default values is not eliminating the rounded corners.

    tooltip:not(#asdf):not(#adsf) {

    -moz-appearance: none !important;
    border-radius: 0 !important; -moz-border-radius: 0 !important;
    border: 1px solid black !important;
    -noz-border-image: none !important;
    background-color: #fff !important;
    -moz-box-sizing: content-box !important;
    clip: auto !important;
    outline: none !important;
    background-clip: border-box !important;}

  • Doesn't seem to make much of a difference here:

    image
    271 x 140 - 29K
  • i am loving all the support this topic is getting, though all the code listed i have tryed with no success :(
  • Does -moz-border-image: none !important; have the same effect as background-image:none !important;?
  • nope still no effect :(
  • Apply whatever custom appearance to the tooltip-label.

    tooltip {
    -moz-appearance: none !important;
    background: none !important;
    border: 1px solid transparent !important;
    }
    .tooltip-label {
    background: #CCC !important;
    border: 1px solid #000 !important;
    color: red !important;
    padding: 4px !important;
    text-shadow: black 1px 1px 1px !important;
    }
  • Ah, I see.

    image
    136 x 46 - 636B
  • tooltip {
    -moz-appearance: none !important;
    background: none !important;
    border: 1px solid transparent !important;
    }
    image

    tooltip {
    -moz-appearance: none !important;
    background: none !important;
    border: 1px solid transparent !important;
    }
    .tooltip-label {
    background: #CCC !important;
    border: 1px solid #000 !important;
    color: red !important;
    padding: 4px !important;
    text-shadow: black 1px 1px 1px !important;
    }
    image
    389 x 52 - 5K
    393 x 63 - 9K
  • Yep, it's just a matter of getting the child to mimic the general appearance of the parent element.
  • luckymouse said: Pretty sure it's a characteristic of the user's operating system.

    Windows XP doesn't have rounded tooltips, WIndows 7 does.

    Setting some properties to their default values is not eliminating the rounded corners.

    tooltip:not(#asdf):not(#adsf) {

    -moz-appearance: none !important;
    border-radius: 0 !important; -moz-border-radius: 0 !important;
    border: 1px solid black !important;
    -noz-border-image: none !important;
    background-color: #fff !important;
    -moz-box-sizing: content-box !important;
    clip: auto !important;
    outline: none !important;
    background-clip: border-box !important;}


  • srazzano said: tooltip {

    -moz-appearance: none !important;

    background: none !important;

    border: 1px solid transparent !important;

    }

    .tooltip-label {

    background: #CCC !important;

    border: 1px solid #000 !important;

    color: red !important;

    padding: 4px !important;

    text-shadow: black 1px 1px 1px !important;

    }


    The code works well, very creative thinking the only problem is it doesn't work with https://addons.mozilla.org/en-US/firefox/addon/url-tooltip/ which is the main reason i wanted this :(

    **Edit The tooltip the addon produces doesn't seam to have a .tooltip-label so instead the tooltip is very transparent and almost impossible to read :)

  • is there any way to get your script to work while keeping the functionality of the addon ?
  • tooltip, #aHTMLTooltip, urlTooltip, bhTooltip {
    -moz-appearance: none !important;
    background: none !important;
    border: 1px solid transparent !important;
    }
    .tooltip-label, #aHTMLTooltip description {
    background: #CCC !important;
    border: none !important;
    color: red !important;
    margin-top: -2px !important;
    padding: 0px 4px 4px 4px !important;
    text-shadow: black 1px 1px 1px !important;
    }
    #aHTMLTooltip description#label {
    border: 1px solid #000 !important;
    }
    #aHTMLTooltip description#uri {
    border: 1px solid #000 !important;
    border-top: none !important;
    }

    image
    225 x 67 - 5K
  • Works perfectly :) Thanks all that has taken part in this discussion and kudos to Srazzano for solving the problem :)

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!