search

CreativeBulma / bulma-tooltip

Display a tooltip attached to any kind of element, in different position.
MIT License
76 stars 40 forks source link

Tooltip don't wrap correctly. #27

Open ppwwyyxx opened 2 years ago

ppwwyyxx commented 2 years ago

See screenshot: 2022-05-25_15-54

The text with tooltip is at the beginning of 2nd line, but the tooltip is at the end of the 1st line. This is unexpected.

Source code for the above image is modified from the official documentation. Given below:

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://bulma-tooltip.netlify.app/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Get Started - BulmaTooltip</title>
    <link rel="icon" href="https://bulma-tooltip.netlify.app/favicon.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://bulma-tooltip.netlify.app//css/docs.css" />
    <link rel="stylesheet" href="https://bulma-tooltip.netlify.app//css/bulma-tooltip.min.css" />
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body class=''>
    <div class="container is-fullheight">
        <div class="mobile-burger burger is-hidden-desktop" data-target="#doc-menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="columns is-gapless is-fullheight">
            <div id="doc-menu" class="column is-2 menu is-mobile">
                <a href="https://bulma-tooltip.netlify.app/" class="brand">
    <span class="title is-6 has-text-weight-normal">BulmaTooltip</span>
    <span class="subtitle tag is-primary is-light is-7 has-text-weight-light is-uppercase">docs</span>
</a>
<ul class="menu-list">
            <li class="">
                <a href="/" class="menu-item">
                    <span>Introduction</span>
                </a>
            </li>
            <li class="">
                <a href="/get-started/" class="menu-item">
                    <span>Get Started</span>
                </a>
            </li>
            <li class="menu-item has-dropdown ">
                <a href="#" class="menu-title">
                    <span>How-To</span>
                    <span class="menu-caret"></span>
                </a>
                <ul class="menu-dropdown">
                        <li class="">
                            <a href="/how-to/customize/" class="menu-item">Customize</a>
                        </li>
                </ul>
            </li>
            <li class="">
                <a href="/changelog/" class="menu-item">
                    <span>Changelog</span>
                </a>
            </li>
</ul>
            </div>
            <div class="column is-fullheight">
                <nav class="navbar" role="navigation" aria-label="navigation" style="background-color: transparent !important;">
    <div class="navbar-menu">
        <div class="navbar-start">
        </div>
        <div class="navbar-end">
            <a class="navbar-item is-square" href="https://github.com/CreativeBulma/bulma-tooltip" alt="Github repository" target="_blank">
                <span class="icon">
                    <i class="fab fa-lg fa-github"></i>
                </span>
            </a>
        </div>
    </div>
</nav>
                <div class="section is-fullheight" style="padding: 3rem;">
                    <div class="content is-fullheight">
                        <h1 id="get-started">Get started</h1>
<div class="preview">
    <div class="tabs">
        <ul>
            <li class="is-active" data-toggle="tab" data-target="#previewdefault" role="tab" aria-selected="true">
                <a>Preview</a>
            </li>
            <li data-toggle="tab" data-target="#previewCodedefault" role="tab" aria-selected="false">
                <a>Code</a>
            </li>
        </ul>
    </div>
    <div class="tab-content" id="preview-default">
        <div class="tab-pane is-active" id="previewdefault" role="tabpanel" aria-labelledby="preview-default">
<p>Lorem ipsum dolor sit amet, asdfasdfasdfasdfasdfasdfsdfasd asdfasdfasd fasdfasdfasdfA   asdfasdfasd asdfasdfasd asdfasdfasd asdfasdfasd asdfasdfasd
<span data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.</p>
        </div>
        <div class="tab-pane" id="previewCodedefault" role="tabpanel" aria-labelledby="preview-code-default">
            <div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">
&lt;<span style="color:#309;font-weight:bold">p</span>&gt;Lorem ipsum dolor sit amet, &lt;<span style="color:#309;font-weight:bold">span</span> <span style="color:#309">data-tooltip</span><span style="color:#555">=</span><span style="color:#c30">&#34;Tooltip content&#34;</span>&gt;consectetur adipisicing elit&lt;/<span style="color:#309;font-weight:bold">span</span>&gt;. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.&lt;/<span style="color:#309;font-weight:bold">p</span>&gt;
</code></pre></div>
        </div>
    </div>
</div>
<p>Tooltip can be used on any type of HTML element supporting dataset.
<script src="https://bulma-tooltip.netlify.app//js/clipboard.min.js" type="text/javascript"></script>
    <script src="https://bulma-tooltip.netlify.app//js/docs.js" type="text/javascript"></script>
</body>
</html>
suterma commented 5 months ago

This is probably because the tooltip is actually on the :: before virtual element, and it gets wrapped. I don't know whether this combination can be made non-wrapping though.