ryangjchandler / alpine-tooltip Goto Github PK

Hi,

The content of the tooltip breaks and wraps correctly in order to stay within the viewport. However the actual box overflows the viewport if zoomed in or on mobile. You can see on the screenshot that the x-scrollbar appears once the tooltip is shown and that the box does not stay within the viewport on the right side.

How can I modify this? How can I add css to make to render correctly?

best regards
Martin

Hello,
How can I always show the tooltip, please?

Is it possible to load content through ajax request? Ex.

onShow(instance) {
    fetch(`endpoint`)
    .then((response) => response.text())
    //...
}

as the title says

here is an example

<div x-data="{ tooltip: 'This is crazy!' }">
        <button disabled x-tooltip="tooltip">Hover for info!</button>
</div>

Thank you :)

Ryan, stoked to see you built this plugin. It is great! 😁

Any chance animation support will be added at some point?

I get this error when trying to use the magic variable...

Uncaught ReferenceError: $tooltip is not defined

Using the CDN to bring in alpine-tooltip

Hi Ryan

Thanks for this - it is great.

Question: Is there a way to make the text of the tooltip dynamic? I'm trying to figure out how to make it toggle between "Enable" and "Disable" based on an underlying Livewire property being true or false.

Something like
x-data="{ tooltip: {{ $user->disabled ? "'Enable'" : "'Disable'" }} }"

It works when the page loads, but it does not toggle when $user->disabled changes.

Hello @ryangjchandler, nice package. This is not an issue, but a thought about a development or new package based on this. If you had discussions enabled on this repository I'd put it there!

I'm thinking about how it might be possible to extend or develop this to provide a guided tour functionality like https://shepherdjs.dev/

x-data="{ tooltip: 'This is crazy!' }" could have another parameter like tourIndex=x and then alpine could be used to step through making them visible in turn. The displayed tooltip would need to have a next button/arrow at least.

It's quite a change so probably better done as a separate package than as a development on this one.

Have you ever tried anything like that? I'm going to have a play, it might be a dead end!

I'm a little confused how the TippyJS dependency works for this package. Shouldn't tippy.js be in the dependencies, rather than the devDependencies of the package.json file? Somehow the plugin still works even without this. Are you compiling/including the entirety of Tippy in this repo in order to use it? If this is the case, doesn't this make us dependent on this package re-compiling if Tippy makes updates, rather than getting them ourselves?

I also found myself directly requiring the Tippy package anyway, in order to compile the necessary CSS into my app.

hi,

i want to display data from a distant parent scope with my own html code in the tooltip.

e.g. similarly.

<div x-data="{ tooltip: 'This is crazy!' }">

    <button x-tooltip="{ content: $refs.tooltipHtml.innerHTML, allowHTML: true }">Hover for info!</button>

    <template x-ref="tooltipHtml">
        <p x-text="tooltip"></p>
    </template>
</div>

demo

i think the ref due inside the data can't be used.
what is a good way to have your own dynamic html code?

thanks for your help!

Hi, if i use the npm package, the $tooltip magic property is missing.

In my application of alpine-tooltip I've set the placement to bottom, but because depending on the scroll position and room in the viewport, Popper decides it's better to place it above my element. I need to disable that. Popper has the Flip modifier for that, but I can't figure out how to disable that via the alpine-tooltip parameters.

What I've tried:

x-tooltip.on.click.duration.133.animation.shift-away.theme.ft.html.interactive.placement.bottom.flip.false="My tip"

And:

x-tooltip.on.click.duration.133.animation.shift-away.theme.ft.html.interactive.placement.bottom.flip.false="{content: () => $refs.tip.innerHTML, appendTo: $root, flip: {enabled: false }"

But that's apparently not supported. Is it possible to disable the flip modifier?

Thanks for maintaining this—after having tried building a custom component myself, I find using alpine-tooltip is a breeze :)

I need to keep the tooltip on mouseover and click... but there is currently no way to do it ?

Hi, when trying to install the plugin as per the docs, I was getting the following error using Laravel Mix (Webpack):

Module not found: Error: Can't resolve '@ryangjchandler/alpine-tooltip' in …

I fixed it by editing your package.json directly, changing "main": "dist/alpine-tooltip.cjs.js" to "main": "dist/module.cjs.js" and "module": "dist/alpine-tooltip.esm.js" to "main": "dist/module.esm.js".

I would create a PR, but unfortunately, I have no idea to do this properly. 😅 Also, maybe I was just doing something wrong in the first place. Anyways, I hope this will help someone else.

I'm using this package with AlpineJS V3. While using tables and pagination, the tooltips were working perfectly on first page load. But, I'm unable to get tooltip updated while using pagination, but I can see the DOM is updating.

@foreach($users as $user)
<tr class="relative border-collapse border border-gray-300" x-data="{ tooltip: 'Hello, {{ $user->name }}' }" x-tooltip="tooltip">
      <td class="px-4 py-2 text-gray-800 font-medium">{{ $loop->index + 1 }}</td>
      <td class="px-4 py-2 text-gray-800 font-medium">{{ $user->name }}</td>
      <td class="px-4 py-2 text-gray-800 font-medium">{{ $user->email }}</td>
      <td class="px-4 py-2 text-gray-800 font-medium">{{ $user->phone }}</td>
</tr>
@endforeach

how can i change tooltip background to white ?

I would like to use x-tooltip like this:

<span x-tooltip.on.click="tooltip" x-tooltip.placement.left> <i class="icon-question-circle1"></i> </span>
I want it to appear left placement when click event (not default hovering). But, click event only works, and left placement not working (i.e. appearing on top - default placement).

Any help, plz.

At the moment, tooltips can only be created with the x-tooltip directive. Would be pretty neat if we had a $tooltip directive that could show them on-demand.

<button @click="$tooltip('Hello, world!', { /* tippy config object */ })">

Hi,

I am using tailwindcss and have probleme creating my own theme.

importing a theme from tippy.js and setting it via theme: 'light' on the x-tooltip works fine but creating my own theme via css in tailwindcss like in the following, doesn't work at all.

in the x-tooltip in html: theme: 'custom'

in my tailwind app.css:

.tippy-tooltip.custom-theme {
  @apply bg-p1 text-tpri border border-p1;
}

What am I missing here?

best regards
Martin

Fullcalendar 5 allows the manipulation of a calendar "event" behaviour through the eventDidMount hook.

There are a number of examples in codepen showing how to bind tooltip libraries to the "event". Those libraries allow passing the element to the library constructor. I want to use $tooltip magic helper or similar to achieve a "calendar event tooltip". I have tried the below however the tooltip is bound to the entire calendar element, not the individual "event".

eventDidMount: function(info) {
    if (@js($withTooltip)) {
        info.el.addEventListener('mouseenter', function(){
            $tooltip('Hello, world!');
            });
    }
},

Hi,

we want to use your awesome tooltip for our laravel/livewire app. Navigation is done via wire:navigate.
This doesn't always load the full DOM hence I need to reinitialize some eventHandlers.

However I am unable to find the correct syntax for your plugin. The following doesn't work.

 window.addEventListener('livewire:navigated', () => {
     
        tippy('[data-tippy-content]');
        
       Livewire.hook('afterPageChange', () => {
         tippy('[data-tippy-content]');

       }) ;
       
});

Any idea how to solve this?

Are themes imported automatically? Can't seem to get any of them to work.

first of all thanks for this great package,
is it possible to add the placement modifiers too?

     <button class="border inline text-black p-1 bg-white rounded m-1"
      x-text="product.number" x-tooltip="product.name"></button>

I have added the script and the CSS but the tooltip not show , Even the raw tooltip does not show .. nothing works

      <link rel="stylesheet" href="//unpkg.com/tippy.js@6/dist/tippy.css" />
    <script src="//cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/cdn.min.js" defer></script>

Hello Team,

Does anyone know how to set the tooltip theme globally ?
I'm aware one can change theming per tooltip, but I don't want to be specifying the theme for each and every tooltip.

Activate allow html not working. Html not parsed.

<div x-data="{pdata:'<strong>hola</strong>'}"> <button x-tooltip="pdata" x-tooltip.html>Hover me</button> </div>

Me again, 😁

Not really an issue, more of a question.

Would you merge an PR with adds a small information for Tailwindcss users?

Like "If you use Tailwind with purging and are bundling tippys css with you assets, beware of adding the safelIstPattern tippy- to your tailwindjs config.".

I stumbled across this and might help others save some minutes ✌🏼