Вопрос по CSS и child

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

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

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

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

Как делаете?

Ну покажите кусок 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;       
}

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

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

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

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

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

.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; }

Итог один)

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

 <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