Использование всплывающей подсказки пользовательского интерфейса jQuery с настраиваемой стрелкой вызывает проблему с вспJquery

Программирование на jquery
Ответить Пред. темаСлед. тема
Anonymous
 Использование всплывающей подсказки пользовательского интерфейса jQuery с настраиваемой стрелкой вызывает проблему с всп

Сообщение Anonymous »

Я использую плагин пользовательского стиля Tooltip...

Теперь я хочу отображать всплывающую подсказку так, как показано на этих сайтах и ​​как показано на фотографии ( Например, со стрелкой, которая будет частью подсказки):
  • Ссылка на пример
  • Ссылка на пример
Изображение


I попытаюсь применить несколько правил CSS, но мне все еще не удается заставить его выглядеть так, как я хочу... пожалуйста, помогите мне. Вот мой CSS-код:

Код: Выделить всё

body .ui-tooltip {
border-width:0;
}

.ui-tooltip,.arrow:after {
background:black;
border:0 solid white;
}

.ui-tooltip {
padding:10px;
color:white;
border-radius:5px;
font-family:Verdana, sans-serif;
font-size:12px;
text-transform:none;
}

.arrow {
width:70px;
height:16px;
position:absolute;
left:0!important;
margin-left:-25px;
top:55%;
}

.arrow.top {
top:-16px;
bottom:auto;
}

.arrow.left {
left:20%;
}

.arrow:after {
content:"";
position:absolute;
left:20px;
top:-20px;
width:25px;
height:25px;
box-shadow:6px 5px 9px -9px black;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
tranform:rotate(45deg);
}

.arrow.top:after {
bottom:-20px;
top:auto;
}

.ui-tooltip {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
filter:alpha(opacity=70);
opacity:0.7;
}
Когда я применяю приведенный выше код CSS, на моем дисплее не отображается полная подсказка:

Изображение


Но я хочу, чтобы это выглядит так, в полный размер:

Изображение


У моей стрелки кода CSS есть проблемы, и она не похожа на приведенный мной пример.

Изменить:
Теперь проблема со стрелками решена... но если вы видите желаемое отображение это не то, что я хочу

Код: Выделить всё

.ui-tooltip {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:0.7;
}
Думаю, у них нет кода CSS... не могли бы вы подсказать, как их прозрачность работает

Подробнее здесь: https://stackoverflow.com/questions/139 ... ltip-issue
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Jquery»