Я пытаюсь использовать всплывающий модуль семантического пользовательского интерфейса, и он никогда не работал должным образом с точки зрения позиционирования в моем проекте, как в демонстрациях. Я попробовал несколько хаков (установив позицию на relative и т. д.), но не повезло; Вот скрипт: http://jsfiddle.net/smt94eox/, в котором я намеревался показать всплывающее окно сверху слева от кнопки при наведении курсора:
$('#smile').popup({
inline: true,
hoverable: true,
position: 'top left'
});
Но при наведении всплывающее окно отображается внизу страницы. Кто-нибудь знает, почему и как это исправить?
Ответ 1 · рейтинг 4 · tcigrand
Согласно документам
Вам не нужна опция inline
Использование параметра inline: true сообщит Semantic, что нужно отобразить следующий всплывающий элемент пользовательского интерфейса того же уровня после активатора.
Если вы удалите встроенную опцию и убедитесь, что для всплывающего окна есть место, оно будет отображаться правильно. http://jsfiddle.net/smt94eox/1/
HTML - просто используйте "margin", чтобы создать место для всплывающего окна
<div id="smile" class="ui labeled icon button" title="You can see this" style="margin:100px">
<i class="smile icon"></i>Click me first
</div>
JavaScript
$('#smile').popup({
hoverable: true,
position: 'top left'
});
