Блог

Главная - Вопросы по программированию - Нужен стиль CSS такой же, как показано на изображении

Нужен стиль CSS такой же, как показано на изображении

#css

#css

Вопрос:

У меня есть всплывающая подсказка, я хочу, чтобы всплывающая подсказка выглядела так, как показано на этом изображении, как показано

http://www.tiikoni.com/tis/view/?id=fa381ec

Я пробовал этот способ, но он не работает, не мог бы кто-нибудь, пожалуйста, сообщить мне, как этого добиться?

 .flotr-mouse-value {
    font-size: 10px;
    border: 45px solid #12a1da;

}

Комментарии:

1. Вы сгенерировали tooptip с помощью библиотеки javascript? Если да, вам нужно рассказать нам, как вы это сделали. Нет способа ответить на этот вопрос в том виде, в каком он написан.

2. developer.mozilla.org/en/CSS_Reference

3. Я использую humblesoftware.com/finance/index для этого, поскольку вы видите всплывающую подсказку черным цветом, я хочу, чтобы она была моего настроенного цвета

4. Внутри Flotr.js В файле я нашел эту строку elStyle = ‘непрозрачность: 0.7; цвет фона: желтый; цвет: #fff; положение: относительное; отступ: 2px 8px;-moz-border-radius: 4px;border-radius: 4px; пробел: nowrap;’;

5. Я решил проблему, чем вам очень понравился.

Ответ №1:

вы можете сделать это следующим образом:

 <div id="tooltip">
    <div class="contents">
        contents of the tooltip
    </div>
    <div class="arrow"></div>
</div>

и стиль:

 #tooltip {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 300px;
    height: 150px;
}
#tooltip div.contents {
    background: #ccc;    
    height: 150px;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
}

#tooltip div.arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50px;
    bottom: -10px;
    background: url(arrow_down.gif) no-repeat;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
}