Проблема с подсказками Bootstrap не отображается в нужном месте

У меня есть изображение карты с несколькими маркерами - каждый маркер с классом .marker абсолютно позиционируется, а родительский div #map относительно позиционируется - так хорошо.Проблема с подсказками Bootstrap не отображается в нужном месте

Я использую Bootstrap, и я хотел бы иметь tooltip с указанием названия местоположения, когда пользователь наводится на один из маркеров. Всплывающая подсказка появляется и работает так, как ожидалось, за исключением того, что она нигде рядом с маркером - она находится в верхней части div #map.

Любые идеи относительно того, как я смогу установить всплывающую подсказку для отображения рядом с/над маркером, который абсолютно позиционируется?

Любая помощь будет оценена,

Ян

источник

2013-03-22 Ian Muscat

Не могли бы вы высказать свой код, может быть, в jsfiddle? – spullen

Привет, я пробовал делать это, если честно, но мне не удалось заставить его работать в jsfiddle - я попробую дать ему еще один ... –

Не уверен, если это будет работать с вашим кодом (опубликовать его?)

Добавьте к вашим ЯШ:

$(function() { 
    $('.marker').tooltip({placement: 'right'}); 
});

Или, если вы используете data- attributes:

<div class="marker" data-toggle="tooltip" data-placement="right"></div>

источник

2013-03-22 17:39:24 spullen

Да, я использую атрибуты данных. И да, это правильно. Всплывающая подсказка всегда отображается вверху '.map' div. –

. Каков css для класса маркера, возможно, разместите свой css. Вы можете попробовать и удалить все пользовательские стили, которые у вас есть для маркера, и создать его там. Вы также можете попробовать использовать js. – spullen

$ ('[data-toggle = "подсказка"]'). Tooltip ( {container: 'body', placement: 'right'} ) – Oleksii

Всплывающие подсказки Bootstrap применяются над относительными элементами позиции. Убедитесь, что ваш элемент является относительным положением, В противном случае вам нужно написать css для .tooltip, чтобы показать его в нужном месте.

источник

2013-08-16 15:54:40

Легко изменить подсказку данных-плейсмент = "влево", данные размещения = "право", данные размещения = "сверху", данные размещения = "снизу"

ниже упомянуть код

<div class="col-md-10 col-md-push-1"> 
    <div class="col-md-3"> 
    <button type="button" class="btn btn-block btn-danger col-md-10" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> 
    </div> 
    <div class="col-md-3"> 
    <button type="button" class="btn btn-block btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> 
    </div> 
    <div class="col-md-3"> 
    <button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> 
    </div> 
    <div class="col-md-3"> 
    <button type="button" class="btn btn-block btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 
    </div> 
</div>     

<script> 
$('[data-toggle="tooltip"]').tooltip({ 
}); 
</script>

источник

2014-06-24 13:51:56

Проблема с подсказками Bootstrap не отображается в нужном месте

ответ

Смежные вопросы