Положение всплывающего окна семантического пользовательского интерфейса далеко

Я пытаюсь использовать всплывающий модуль семантического пользовательского интерфейса, и он никогда не работал должным образом с точки зрения позиционирования в моем проекте, как в демонстрациях. Я попробовал несколько хаков (установив позицию на relative и т. д.), но не повезло; Вот скрипт: http://jsfiddle.net/smt94eox/, в котором я намеревался показать всплывающее окно сверху слева от кнопки при наведении курсора:

$('#smile').popup({
    inline: true,
    hoverable: true, 
    position: 'top left'
});

Но при наведении всплывающее окно отображается внизу страницы. Кто-нибудь знает, почему и как это исправить?


jquery css semantic-ui
person benjaminz    schedule 01.06.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Согласно документам

Вам не нужна опция 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'
});
person tcigrand    schedule 02.06.2015
comment
Я вижу, я совершенно забыл освободить место для всплывающего окна. Благодарю вас! - person benjaminz; 03.06.2015