Disable default tooltip in Pluto

General Usage
, ,
1

Hi,

I am using @NTBond in PlutoExtras.jl to make a widget. Here is a basic example from the documentation:

@NTBond "WoW" begin
	a = ("Description", Slider(1:10))
end

I injected custom code into the tuple where “Description” is located to display a label and a tooltip ( e.g., an icon (?) which provides additional text when the mouse hovers over it). Unfortunately, there is a default tooltip that displays overtop of mine. Is there a way to disable the default tool tip?

Thanks!

2

Hi @Christopher_Fisher, at the moment the tooltip is always inserted but I just started yesterday a draft PR where I also wanted to add more flexibility including better tooltip management.

If you give more details about how you create the tooltip now I can see if there is an easy temporary hack before I finish the PR

2 Likes
3

That sounds like a nice new feature you are adding.

Thanks for offering some guidance. Here is my approach:

@NTBond "WoW" begin
	a = (md""" $(tool_tip("label", "description"))""", Slider(1:10))
end

I generated the tool tip html code with GPT 4.5. Its probably not the best, but it works.

tool_tip function 
function tool_tip(label, description)
temp = @htl(
	"""
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title with Superscript Icon</title>
  <style>
    .wrapper {
      font-family: sans-serif;
      font-size: 16px;
    }

    .tooltip-container {
      position: relative;
      display: inline-block;
      cursor: pointer;
      vertical-align: super; /* Align like a superscript */
      margin-left: 4px;
    }

    .question-icon {
      background-color: #e0e0e0;
      color: #333;
      font-weight: bold;
      font-size: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      user-select: none;
      box-sizing: border-box;
    }

    .tooltip-text {
      visibility: hidden;
      width: 140px;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 6px;
      border-radius: 5px;
      position: absolute;
      top: 10%;
      left: 130%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 1;
      font-size: 12px;
    }

    .tooltip-container:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }

    .tooltip-text::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: transparent #333 transparent transparent;
    }
  </style>
</head>
<body>

  <div class="wrapper">
    $label
    <span class="tooltip-container">
      <span class="question-icon">?</span>
      <span class="tooltip-text">$description</span>
    </span>
  </div>

</body>
</html>
	"""
)
end```
4

@disberd, I hope you don’t mind. I want to follow up quickly to see if there is an easy hack? If not, do you have an approximate timeline for your PR?

5

Hi,

The code you had does not need the <html> <body> <head> tags, so I removed them (we don’t need to generate a fully standalone HTML).

I added a script to the element that disables the tooltip when hovering over the question mark, and restores it when not hovering anymore. This seems to work on my side:

updated tooltip code 
function tool_tip(label, description)
temp = @htl(
	"""
  <style>
    .wrapper {
      font-family: sans-serif;
      font-size: 16px;
    }

    .tooltip-container {
      position: relative;
      display: inline-block;
      cursor: pointer;
      vertical-align: super; /* Align like a superscript */
      margin-left: 4px;
    }

    .question-icon {
      background-color: #e0e0e0;
      color: #333;
      font-weight: bold;
      font-size: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      user-select: none;
      box-sizing: border-box;
    }

    .tooltip-text {
      visibility: hidden;
      width: 140px;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 6px;
      border-radius: 5px;
      position: absolute;
      top: 10%;
      left: 130%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 1;
      font-size: 12px;
    }

    .tooltip-container:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }

    .tooltip-text::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: transparent #333 transparent transparent;
    }
  </style>
  <div class="wrapper">
    $label
    <span class="tooltip-container">
      <span class="question-icon">?</span>
      <span class="tooltip-text">$description</span>
	<script>
		const tooltip = currentScript.parentElement
		const description = tooltip.closest('field-description')
		let title
		
		tooltip.addEventListener('mouseenter', () => {
			title = description.title
			description.setAttribute('title', '');
		});

		tooltip.addEventListener('mouseleave', () => {
			description.setAttribute('title', title);
		});
	</script>
    </span>
  </div>
	"""
)
end
1 Like
6

Thanks for your help and feedback!