Вопрос по CSS и child

12
i.lisovenko
На сайте с 14.01.2022
Offline
20
147
Всем привет! Уже всю голову сломал, возможно кто-то поможет (если получится, отблагодарю денежкой), собственно вот моя проблема... Делаю сайт на котором в шаблоне main.tpl есть следующее содержание <div class="ff2">{content}</div> далее есть шаблон shortstory.tpl в котором есть содержание <div class="plus2 tooltip>тут сама новость <p class="tooltext">всплывающая подсказка</p></div> и на главной страничке выводится 100 новостей (10 рядов по 10 штук в ряд). Сделал красивую в моем понятии всплыыающую подсказку! НООООО. У подсказки ширина задана в пикселях и позиционирование абсолютное, везде все красиво кроме крайних правых новостей так как там подсказка появляется за экраном уже и появляется скролинг и это бесит! Хочу например для 2-3 крайних правых столбиков новостей сделать чтоб подсказка всплыывала не справа а слева, чтоб скролинг не появлялся и именно в этот момент возникают проблемы, пытаюсь посредствами псевдокласса child делать прописывая например для каких по порядку элементов это пытаюсь делать. Но либо тут еще либо что то не так делаю и ничего не происходит. Плюс возможно делаю ошибку с учетом вложенностей классов. Может кто то помочь с этим? Сайт покажу при общении, пока не хотелось бы рекламировать его


Люблю делать разные сайты. Из последних работ: https://i-have-a-dream.ru или https://cheapshot.ru
Sevix
На сайте с 24.10.2011
Offline
93
#1
Почему бы не использовать какую нибудь tooltip js? Их много разных. В Bootstrap, к примеру, сразу встроена.
i.lisovenko
На сайте с 14.01.2022
Offline
20
#2
Sevix #:
Почему бы не использовать какую нибудь tooltip js? Их много разных. В Bootstrap, к примеру, сразу встроена.

Да фиг знает) Так же показали сборник всплывающих подсказок) Какую то выбрал и вот теперь на) Если есть варианты, был признателен если скинете)

Sevix
На сайте с 24.10.2011
Offline
93
#3

Конкретно не подскажу, но их море. Выбирай на чистом js. без зависимостей, кроссбраузерную, с более-менее свежим обновлением, небольшого размера и пробуй пару штук. Стили уже подправить под себя можно будет.

Да вот, например: https://www.cssscript.com/?s=tooltip

Tiny Smart Tooltip JavaScript Library – Tooltipper
Tiny Smart Tooltip JavaScript Library – Tooltipper
  • www.cssscript.com
DemoDownload DemoDownload DemoDownload DemoDownload DemoDownload DemoDownload DemoDownload Tippy.js is a small yet highly customizable JavaScript tooltip library that helps you add customizable, interactive, animated tooltips to any DOM elements. DemoDownload DemoDownload DemoDownload
i.lisovenko
На сайте с 14.01.2022
Offline
20
#4
Sevix #:

Конкретно не подскажу, но их море. Выбирай на чистом js. без зависимостей, кроссбраузерную, с более-менее свежим обновлением, небольшого размера и пробуй пару штук. Стили уже подправить под себя можно будет.

Да вот, например: https://www.cssscript.com/?s=tooltip

Проблема еще вот в чем, те что я посмотрел из ваших пример (может мне конечно повезло тыкнуть именно в них) но у многих провто надо дописывать класс у того или иного элемента типа: лефт райт и тд. Но моя проблема в том что я не могу это сделать, у меня в ДЛЕ просто одним словом {content}   формируется 100 новостей в ряд 10 и по высоте 10 и для какой то выборочно я не могу прописать класс райт лефт и тд, я бы уже давно сделал все. По сути у меня на страничке 100 элементов которые выводятся при помощи одного шаблона то есть скрипт генерит 100 новостей подряд и все. Именно поэтому я и хотел класс чайлд так как там можно задать типа какие элементы с другим стилем но что то не получается отсего и помощи попросил.

W1
На сайте с 22.01.2021
Offline
191
#5
i.lisovenko :
что то не так делаю

Как делаете?

i.lisovenko :
Сайт покажу при общении, пока не хотелось бы рекламировать его

Ну покажите кусок html-кода и стили, которые "не получаются".

Мой форум - https://webinfo.guru –Там я всегда на связи
i.lisovenko
На сайте с 14.01.2022
Offline
20
#6
webinfo #:

Как делаете?

Ну покажите кусок html-кода и стили, которые "не получаются".

Ну делаю ручками.. Например вот куски кода

Страничка main.tpl

        <div class="ff2">
            {content}{info}
        </div>

Далее шаблон shortstory.tpl который и выводит новости в месте {content}

<div class="plus2 tooltip">
    {include file="/engine/modules/webcash/plugins/donate/site/donate.php?mode=button&template=button&post_id={news-id}&category={category}&default_amount=50"}
    <p class="tooltiptext">Пожертвование: <span>#{news-id}</span><br>Cумма: <span>{category}</span><br><br>Если Вы хотите <span>"не анонимную"</span> помощь, то вам необходимо авторизоваться на сайте!</p>
</div>



А вот содержание css

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Если вы хотите, чтобы точки под перемещаемым текстом */
}

/* Текст подсказки */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #000000;
  
color: #fff;
  
text-align: left;
  padding: 7px;
  border-radius: 6px;
  border: 1px solid #f2d200;    
  
position: absolute;
  z-index: 11111;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltiptext span{color: #f2d200;display: inline-block;}


.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  width:290px;
  left:105px;
  bottom: -108px;      
}

И во вложении файлик где у крайних блоков оно выходит за экран. А у ближних левых все ок!

jpg 6qt_ac4hi-1.jpg
jpg pdu_jrk6w-2.jpg
i.lisovenko
На сайте с 14.01.2022
Offline
20
#7
webinfo #:

Как делаете?

Ну покажите кусок html-кода и стили, которые "не получаются".

Пробовал вот такого типа сочетания css

.ff2 > div:nth-child(10) .tooltip .tooltiptext,
.ff2 > div:nth-child(11) .tooltip .tooltiptext,
.....
{
left: -200px;
}

Типа для крайних блоков пытался задать другой стиль но не срабатывало.

i.lisovenko
На сайте с 14.01.2022
Offline
20
#8
webinfo #:

Как делаете?

Ну покажите кусок html-кода и стили, которые "не получаются".

Пробовал разные сочетания вложонности стилей так как мог натупить

.ff2 > div:nth-child(10) .plus2 .tooltip .tooltiptext {left: -400px; }
.ff2 > div:nth-child(5) .plus2 .tooltip .tooltiptext {left: -400px; }
.ff2 > div:nth-child(6) .tooltip .tooltiptext {left: -400px; }
.ff2 > div:nth-child(12) .plus2 .tooltip {left: -400px; }

Итог один)

i.lisovenko
На сайте с 14.01.2022
Offline
20
#9
Может вот просто как то не правильно вложености классов прописываю... Голова кипит уже
i.lisovenko
На сайте с 14.01.2022
Offline
20
#10

Ну то есть общий вид вода типа такого получается

 <div class="ff2">
        <div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>
        <div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>
        <div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>
        <div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>
        <div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>
        <div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>
        <div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>
</div>

И вот для каких то 

<div class="plus2 toolyip">ла ла<p class="tooltext">подсказка</p></div>

Хочется применить другой класс 

tooltext
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий