Problem with a dropdown. The same code PHP generates a different CSS in two case

Example: https://www.freuciv.com/test/

There is a dark and light mode switch on the menu bar. When you hover the mouse over it, a dropdown appears. The PHP code of this button is:

<?php
$bimber_class = array(
    'g1-drop',
    'g1-drop-nojs',
    'g1-drop-before',
    'g1-drop-the-skin',
    'g1-drop-the-skin-' . bimber_get_theme_option( 'global', 'skin' ),
);
$bimber_class = array_merge(
    $bimber_class,
    explode( ' ', bimber_hb_get_element_class_from_settings( 'skin_dropdown', false ) )
);
$bimber_class = array_filter( $bimber_class );
?>
<div class="<?php echo implode( ' ', array_map( 'sanitize_html_class', $bimber_class ) ); ?> g1-dropable g1-column">
    <button class="g1-button-none g1-drop-toggle">
        <span class="g1-drop-toggle-icon"></span><span class="g1-drop-toggle-text"><?php esc_html_e( 'Switch skin', 'bimber' ); ?></span>
        <span class="g1-drop-toggle-arrow"></span>
    </button>
    <?php if ( bimber_get_theme_option( 'header_builder', 'element_content_skin_dropdown' ) ) : ?>
        <div class="g1-drop-content">
            <?php if ( 'dark' ===  bimber_get_theme_option( 'global', 'skin' ) ) : ?>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the light mode that's kinder on your eyes at day time.', 'bimber' ); ?></p>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the dark mode that's kinder on your eyes at night time.', 'bimber' ); ?></p>
            <?php else : ?>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the dark mode that's kinder on your eyes at night time.', 'bimber' ); ?></p>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the light mode that's kinder on your eyes at day time.', 'bimber' ); ?></p>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>

<?php wp_enqueue_script( 'bimber-skin-mode' ); ?>

I copied this code and put it in the middle of the page. Why does the dropdown only appear at the top switch? I noticed that div.g1-drop-content in the second case has a completely different style list. What is the reason for this?

A colleague from StackOverflow suggests it has to do with Bootstrap Tooltip. I don’t quite understand what he means. I added a tooltip class to the button, but that didn’t change anything.

  • This topic was modified 3 days, 8 hours ago by reti.

The page I need help with: [log in to see the link]



Source link