У меня есть система рейтинга на моем сайте, и я хочу добавить всплывающее окно (popover для bootstraper's) на звездах!
<div id="rating" class="ui massive star rating" data-rating="0" data-max-rating="5"></div>
Некоторая альтернатива?
На данный момент эта функция недоступна в Semantic-UI, но вы можете добиться этого, выполнив следующие действия:
1- Инициализируйте свой рейтинговый модуль и добавьте в него настройки:
$('.ui.rating')
.rating({
maxRating: 5,
})
;
2- Создайте массив, который будет содержать рейтинг для каждой звезды:
var rate= ['hate it','bad','just ok','like it','love it'];
3- Добавьте этот текст для каждого запуска в data-ratetext
$(document).ready(function () {
$.each($('#rating > i.icon'), function (index, item) {
$(item).attr('data-ratetext', rate[index]);
});
})
4- Инициализировать всплывающие окна для каждой звезды с текстом, взятым для атрибута data-ratetext
:
$(document).on('mouseenter', '#rating > i.icon', function() {
$(this)
.popup({
title: $(this).attr('data-ratetext'),
on:'hover'
})
.popup('show');
});