• Страница 1 из 1
  • 1
Форум » Форум веб мастеров » uCoz » Проблема с подсказкой css
Проблема с подсказкой css

MSerega9680
Пользователи
Сообщений 60
+
0
-
Ваши награды 0
Код

/* Informer comment */

.tooltip{
     display: inline;
     position: relative;
}

.tooltip:hover:after{
     background: #333;
     background: rgba(0,0,0,.8);
     border-radius: 5px;
     bottom: 26px;
     color: #fff;
     content: attr(title);
     left: 20%;
     padding: 5px 15px;
     position: absolute;
     z-index: 98;
     width: 220px;
}

.tooltip:hover:before{
     border: solid;
     border-color: #333 transparent;
     border-width: 6px 6px 0 6px;
     bottom: 20px;
     content: "";
     left: 50%;
     position: absolute;
     z-index: 99;
}

content: attr(title);

/* Informer comment */



Я хотел сделать так вот комментарии <a href="#" title="$MESSAGE$" class="tooltip"><span title="1">OFF</span></a>

И получаеться вот такая штука


Почему оно пишет все html теги?? вместо простого текста который должен быть
«Пред. тема След. тема»

doc74
VIP
Сообщений 717
+
+8437
-
Ваши награды 14
Это из-за html тегов, а точнее у вас в ПУ включена поддержка html тегов, либо отключите их(не советую, по скольку изменятся все материалы), либо просто убрать
Код
title="$MESSAGE$"

из
Код
<a href="#" title="$MESSAGE$" class="tooltip"><span title="1">OFF</span></a>

второй вариант оптимальный, и думаю от этого мало что изменится...

MSerega9680
Пользователи
Сообщений 60
+
0
-
Ваши награды 0
doc74, Убрать то хорошо, но я же хочу сделать такие комменты как мне сделать по другому не подскажите?

BlackPh
Пользователи
Сообщений 1396
+
+538
-
Ваши награды 28
Если я правильно думаю, у тебя где-то недоработки в коде, вот он и показывает себя. Пример не помню точно но что-то типа: <br&st; поищи в коде. Или какой-то тег у тебя просто не закрыт.
Так же советую обратить внимание на эту часть CSS, часто проблема в ней: content: "";
подпись: Мой Vkontakte : vkontakte.ru/blackphxd
Мой Skype: SykybaXD BlackPh

Nexus
Пользователи
Сообщений 24
+
+5
-
Ваши награды 0
Автор, если не хочешь, чтобы html теги отображались в подсказке, то перенеси контент тултипа в какой-нибудь блок, а не бери его из title.
Атрибут title не воспроизводит помещенные в него теги, поэтому они и отображаются.

Avatarz
Пользователи
Сообщений 1
+
0
-
Ваши награды 0
Avatarz написал: отредактировал: GhostlyP - Вторник, 31.12.2013, 02:57 В ответ пользователя Avatarz Написано 17 Ноября 2013 в 14:42
6<\' onclick=\'this.select();\' style=\'width:95%;text-align: center; height:20px; margin-top:15px;\'/>');" style="text-align:right; margin-left:19px;">Сообщение № 6
{спам}

MSerega9680
Пользователи
Сообщений 60
+
0
-
Ваши награды 0
А можите привер на блоках сделать? Я просто этот код взял на сайте и не очень знаю как его правильно сделать!

Nexus
Пользователи
Сообщений 24
+
+5
-
Ваши награды 0
Nexus написал: отредактировал: GhostlyP - Вторник, 31.12.2013, 02:58 В ответ пользователя Nexus Написано 27 Декабря 2013 в 23:22
8<\' onclick=\'this.select();\' style=\'width:95%;text-align: center; height:20px; margin-top:15px;\'/>');" style="text-align:right; margin-left:19px;">Сообщение № 8
CSS
Код
span.tooltip{
   background:rgba(0,0,0,0.95);
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
   font-size:14px;
   color:#FFF;
   padding:5px 15px;
   position:absolute;
   z-index:1;
   width:220px;
}

span.tooltip:before{
   border:solid;
   border-color:rgba(0,0,0,0.95) transparent;
   border-width:0px 10px 10px;
   top:-10px;
   left:10%;
   content:"";
   position:absolute;
   z-index:2;
}


JS
Код
function tooltip(ths){
   var event=window.event.type||event;
   $(ths).before('<span class="tooltip">'+$(ths).attr("tooltip")+'</span>');
   if(event=="focus") $(ths).blur(function(){$("span.tooltip").remove();});
   if(event=="mouseover") $(ths).mouseout(function(){$("span.tooltip").remove();});
   $("span.tooltip").css({"top":($(ths).position().top+$(ths).outerHeight()+5)+"px","left":($(ths).position().left+10)+"px"});
};


Вызов
Код
<[tag] tooltip="[подсказка]" [onmouseover|focus]="tooltip(this);">Контент</[tag]>
Форум » Форум веб мастеров » uCoz » Проблема с подсказкой css
  • Страница 1 из 1
  • 1
Поиск:
Друзья сайта:
Связаться с администратором для дружбы! В Вовчик
Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
Web-мастер системы uCoz R Roman_Domnin
Связаться с администратором для дружбы! В Вовчик
Связаться с администратором для дружбы! В Вовчик
Топ пользователей: