Обрезка всплывающих подсказок в контейнере

Я использую всплывающие подсказки Bootstrap, и они в настоящее время отключены на моей странице. Я удалил свойства Переполнение-х, чтобы попытаться гарантировать, что подсказка видна, но они по-прежнему отрезаны:Обрезка всплывающих подсказок в контейнере

Я посмотрел некоторые возможные решения, но я не могу установить позицию из всплывающих подсказок к фиксированному или изменить родительские подсказки, потому что им нужно прокручивать с элементами в моем контейнере:

https://www.youtube.com/watch?v=qoNkpFAHr0o&feature=youtu.be

Вот как я добавить всплывающие подсказки:

$('#step_name').tooltip(
{ 
    title: "1. Add step title", 
    placement: "left", 
    container: ".editDetailView", 
    trigger: "manual", 
    position: "absolute" 
}); 
$('#uploadMedia').tooltip(
{ 
    title: "2. Upload images/videos", 
    placement: "left", 
    container: ".editDetailView", 
    trigger: "manual", 
    position: "absolute" 
}); 
$('.detailViewText').tooltip(
{ 
    title: "3. Add step description", 
    placement: "left", 
    container: ".editDetailView", 
    trigger: "manual", 
    position: "absolute" 
}); 
$('.update_step_button').tooltip(
{ 
    title: "4. Click to create step", 
    placement: "bottom", 
    container: ".editDetailView", 
    trigger: "manual", 
    position: "absolute" 
});

Вот CSS на контейнерных элементов:

.processBlog{ 
    position: absolute; 
    overflow: auto; 
    form{ 
     overflow: auto; 
     .stepDetailView{ 
      overflow-y: auto; 
      .editDetailView{ 
       position: relative; 
       overflow-y: hidden; 
      } 
      } 
     } 
}

источник

2015-08-29 scientiffic

Вы можете отправить ссылку на страницу, где эта проблема возникает или, по крайней мере, создать jsfiddle? – ray9209

Это, вероятно, ваша проблема: position: "absolute"

Почему бы не использовать data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"

<input type="text" name="text" data-toggle="tooltip" data placement="bottom" title="Tooltip on bottom">

и инициализировать его с

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

источник

2015-08-29 16:04:46 timgavin

Спасибо - когда я удалил абсолютное размещение и добавил элементы данных (изменение размещения данных влево), всплывающие подсказки все еще были обрезаны – scientiffic

Мое предположение: вы применяете CSS, который мешает CSS Bootstrap. Независимо от того, что всплывающие подсказки сверху или снизу должны препятствовать их обрезанию. – timgavin

Я бы хотел, чтобы все они были слева, так что они выглядят более последовательными, даже если их добавление снизу или сверху гарантирует, что они видны. – scientiffic

Попробуйте изменить направление всплывающей подсказки вправо? Вот пример кнопки.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Дополнительной информация here

источник

2015-08-29 16:13:50 Enzo

спасибо за ваш ответ - я бы хотел, чтобы всплывающие подсказки были слева. – scientiffic

@scientiffic это не то, что вы можете сделать, потому что вы находитесь на пределе окна, так что есть способы: 1. Добавьте достаточно ** margin-left ** the titlles с помощью всплывающей подсказки 2. Сделайте сценарий, который переместите заголовок вправо, чтобы сделать достаточно места для всплывающей подсказки для отображения – Enzo

Попробуйте установить опцию контейнера для подсказки:

$(element).tooltip({ 
     title: "Title", 
     container: "#calendar" 
});

Примечания: Вы хотели бы использовать контейнер, который находится над контейнером отрезанием изображения.

Смотрите варианты здесь: http://getbootstrap.com/javascript/#tooltips-options

До/После Фотография

источник

2017-03-27 00:04:57 Loren

Обрезка всплывающих подсказок в контейнере

ответ

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