<div class='orange-button divm'> 3G/GPRS</div> <div class='tooltip'> "> <div class='orange-button divm'> 3G/GPRS</div> <div class='tooltip'> "> <div class='orange-button divm'> 3G/GPRS</div> <div class='tooltip'> " />

jQuery открыть скрытый div вверх по div

У меня такая структура.

<div id="ContentPlaceHolder2_div_Menu" class="bottom-link">
    
</div>

I want to open the div with class tooltip when user mouse over the div with class divm.
It's like menu opening above the div.
Earlier I was using tooltip of flowplayer which is not available now.
As below

enter image description here

Благодарю.

редактировать

I have created a fidle http://jsfiddle.net/c2pdG/28/

1
nl ja de
@krshekhar Можете ли вы создать пример на jsfiddle.net, который показывает его открытие вниз?
добавлено автор Explosion Pills, источник
как я писал, я использовал сторонний jQuery, который давал мне это средство. но он работает неправильно. он имеет метод всплывающей подсказки как $ (". divm"). tooltip ().
добавлено автор शेखर, источник
@ExplosionPills Я знаю, как скрывать скрытый div. Я попробовал функцию .mosueover, но не смог открыть ее вверх, она открывается вниз. Должен ли я иметь видимость, а также позицию каждого li .ttoltipinner?
добавлено автор शेखर, источник
@ExplosionPills извините за мой поздний ответ. Я создал jsfiddle, url jsfiddle.net/c2pdG/22
добавлено автор शेखर, источник
Пожалуйста, укажите плагин jQuery в вопросе.
добавлено автор h0tw1r3, источник

3 ответы

http://jsfiddle.net/c2pdG/23/

Это вопрос CSS. Я обновил CSS так, чтобы он работал по вашему усмотрению, но вам может потребоваться больше настроек - ваш исходный код тоже не работает.

По сути, элементы меню, содержащие подменю, должны иметь position: relative и overflow: visible . Затем подменю (подсказка) требуется position: absolute и bottom: 100% , который будет позиционировать его со своим нижним прикрепленным топом вверху своего относительного родителя (т.е. .bottom-ссылка ).

Несмотря на то, что анимация использует .slideDown , она по-прежнему будет отображаться вверх.

2
добавлено
@krshekhar, к сожалению, нет никакой связи с моим мозгом .. Я многому научился этому опыту и читал различные онлайн-ссылки. Не забудьте принять ответ, если он вам поможет.
добавлено автор Explosion Pills, источник
Спасибо за ваш ответ. Есть много вещей, которые я узнал из этого поста. Но то, что вы сказали, я поражен этим. Можете ли вы предоставить мне какую-то ссылку, откуда я могу узнать эти трюки. Хотя я создал новую скрипку jsfiddle.net/c2pdG/28 для нее.
добавлено автор शेखर, источник
У меня также была проблема с подменю в IE. Если была какая-то ссылка (на странице), то подсказка закрывалась автоматически. Что я сделал, я поставил изображение на фоне подменю li , и он начал работать нормально. Я не мог понять проблему.
добавлено автор शेखर, источник

вы можете так использовать

$(".divm").mouseover(function(){

 var position = $(this).offset();//calculate the position of click

 var winH = $(window).height();   

 var left = position.left;       //calculation bottom left position of tooltip to be displayed
 var bottom  = winH-position.top
$(".tooltip").attr("style","left:"+left+"px;bottom:"+bottom +"px;").show();

});
1
добавлено
шоу покажет вниз. Я хочу показать его вверх
добавлено автор शेखर, источник
Я создал скрипку jsfiddle.net/c2pdG/28
добавлено автор शेखर, источник
Да, это работает, но как насчет того, чтобы скрыть это. В IE есть некоторая проблема, если число li увеличивает поведение очень плохо.
добавлено автор शेखर, источник
спасибо много, но относительная позиция - это опция beeter of @ExplosionPills.
добавлено автор शेखर, источник
@krshekhar - я обновил свой пост ... теперь проверьте его.
добавлено автор sourcecode, источник
@krshekhar - так что теперь он открывается вверх .... do u хотят любые другие модификации?
добавлено автор sourcecode, источник

Если вы можете управлять исходным кодом, я бы просто переключил позиции divs

  • <div class='tooltip'> <div class='tooltipinner'> </div> </div> <div class='orange-button divm'> 3G/GPRS</div>
  • Это откроет всплывающую подсказку над div div.

    Если нет, попробуйте использовать метод prependTo() jQuery

    $('.tooltip').prependTo($('.tooltip').parent());
    

    Это «переместит» элемент в верхний элемент внутри его родителя, который является тегом li.

    Таким образом, ваша функция может выглядеть так:

    $(".divm").mouseover(function(){
        $('.tooltip').prependTo($('.tooltip').parent()).show();
    }
    
    1
    добавлено
    как насчет открытия его вверх
    добавлено автор शेखर, источник
    Используйте селектор sibling: $ (this) .next ('. Tooltip'). Toggle() и используйте CSS для размещения относительно контейнера (li).
    добавлено автор h0tw1r3, источник
    Верстка сайтов HTML/CSS/JS/PHP
    Верстка сайтов HTML/CSS/JS/PHP
    3 439 участник(ов)

    Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

    DotNetRuChat
    DotNetRuChat
    2 992 участник(ов)

    Чат русскоязычного .NET сообщества http://dotnet.ru/ Вам могут быть интересны: @dotnetchat, @cilchat, @fsharp_chat, @pro_net, @xamarin_russia, @microsoftstackjobs, @uwp_ru Флуд в @dotnettalks

    Microsoft Stack Jobs
    Microsoft Stack Jobs
    1 788 участник(ов)

    Work & freelance only Microsoft Stack. Feed https://t.me/Microsoftstackjobsfeed Чат про F#: @Fsharp_chat Чат про C#: @CSharpChat Чат про Xamarin: @xamarin_russia Чат общения:@dotnettalks

    CSS — русскоговорящее сообщество
    CSS — русскоговорящее сообщество
    1 502 участник(ов)

    Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

    Чат — Типичный Верстальщик
    Чат — Типичный Верстальщик
    1 080 участник(ов)

    Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

    pro.net
    pro.net
    710 участник(ов)

    Обсуждение .NET Framework и всего, что с ним связано. Правила: не флудить не по теме, уважать ваших коллег и никакой рекламы (объявления о вакансиях можно согласовать с @AlexFails). Флудилка: @dotnettalks Участник @proDOT

    Microsoft Developer Community Chat
    Microsoft Developer Community Chat
    584 участник(ов)

    Чат для разработчиков и системных администраторов Microsoft Developer Community. __________ Новостной канал: @msdevru __________ Баним за: оскорбления, мат, рекламу, флуд, флейм, спам, NSFW контент, а также большое количество оффтоп тем. @banofbot

    .NET Talks: Force Push Masters
    .NET Talks: Force Push Masters
    490 участник(ов)

    Свободный чат .NET разработчиков. Правила: t.me/dotnettalks/56823 Вам могут быть интересны: @dotnetruchat, @dotnetchat, @cilchat, @fsharp_chat, @pro_net, @dotnetgroup, @xamarin_russia, @microsoftstackjobs, @uwp_ru http://combot.org/chat/-1001128250813

    .NET Chat Убежище
    .NET Chat Убежище
    246 участник(ов)

    Чат .NET разработчиков под эгидой MSK/SPB .NET Community Group Вам могут быть интересны: @fsharp_chat, @dotnetruchat, @cilchat, @xamarin_russia, @microsoftstackjobs, @dotnetgroup Флуд в @dotnettalks

    Веб-Технологи: UI/UX, Вёрстка, Фронтенд
    Веб-Технологи: UI/UX, Вёрстка, Фронтенд
    167 участник(ов)

    Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

    DTP :: @DTPublish
    DTP :: @DTPublish
    147 участник(ов)

    Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

    .NET CIL Chat
    .NET CIL Chat
    54 участник(ов)

    .NET CIL (aka IL aka MSIL)

    css_jobs
    css_jobs
    26 участник(ов)

    Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

    css_флуд
    css_флуд
    10 участник(ов)