Лимитированное количество символов при выводе наименования товара

Иногда, в особенности, когда каталог заполняет сам заказчик, наименование товара может занимать слишком много строк, что может портить дизайн.

Чтобы привести заголовок к подходящему для дизайна виду, пишем скрипт:


$( document ).ready(function() {
$(".name").each(function (i, el) {
    var $el = $(el), title = $el.html();
    $el.parent().attr("title", title);
 $el.html(title.substring(0, 45) + (title.length > 45 ? "...":""));
});
});

Где name - класс элемента, в котором прописано название товара.
Таким образом, название обрежется после 45го символа и в конце поставиться многоточие.

При наведении курсора на наименование товара, будет появляться стандартная подсказка title. Однако, она достаточно мелкая и появляется медленно. Сделаем свою подсказку. Для этого кроме title у элемента, а котором расположено наименование товара, пропишем data-title. А в css пропишем следующий класс:

.name:hover::after {
content:attr(data-title);
}

Далее можно написать любое оформление для нашей подсказки, например у меня такое:

div.product-title strong:hover::after {
content: attr(data-title);
position: absolute;
left: 10%;
top: 70%;
width: 150px;
z-index: 1;
background-color: #2985b0;
font-size: 12px;
padding: 10px 10px;
color: white;
opacity: 0.8;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

Результат будет иметь следующий вид:
Без курсора:




















С наведенным курсором: