@megalabs/ml-popover v0.0.9

Popover_Bot

Подсказка, отображающаяся над элементом

Подсказка без заголовка

<div class="ml-popover ml-popover--down">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>
            

Подсказка c заголовком

<div class="ml-popover ml-popover--down">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__head">
        <h6>Title H6</h6>
    </div>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>

Popover_Top

Подсказка, отображающаяся под элементом

Подсказка без заголовка

<div class="ml-popover ml-popover--up">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>
            

Подсказка c заголовком

<div class="ml-popover ml-popover--up">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__head">
        <h6>Title H6</h6>
    </div>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>

Popover_Left

Подсказка, отображающаяся справа от элемента

Подсказка без заголовка

<div class="ml-popover ml-popover--left">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>
            

Подсказка c заголовком

<div class="ml-popover ml-popover--left">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__head">
        <h6>Title H6</h6>
    </div>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>

Popover_Right

Подсказка, отображающаяся слева от элемента

Подсказка без заголовка

<div class="ml-popover ml-popover--right">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>
            

Подсказка c заголовком

<div class="ml-popover ml-popover--right">
    <i class="ml-popover__arrow"></i>
    <div class="ml-popover__head">
        <h6>Title H6</h6>
    </div>
    <div class="ml-popover__body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    </div>
</div>

Popover пример

Подсказка с заголовком и уголком вправо

<a href="#" data-popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
 data-popover-title="Title H6" 
 data-popover-arrow="right">Example arrow right</a>
            

Расширенные настройки

data-popover - обязательный параметр. Текст подсказки

data-popover-title - необязательный параметр. Заголовок. Без параметра подсказка будет без заголовка

data-popover-arrow="right" - необязательный параметр. В какую сторону направлен уголок. Может принимать значения (left, right, up, down). Без параметра уголок направлен вниз npm репозиторий - https://www.npmjs.com/package/@megalabs/ml-popover

Для установки пакета

• npm i @megalabs/ml-popover
• затем в папке @megalabs/ml-popover запускаем npm install
• npm start

Расширенные настройки

Расположение "уголка" зависит от класса модификатора

ml-popover--down - снизу

ml-popover--up - сверху

ml-popover--left - слева

ml-popover--right - справа