Disable default tooltip in Pluto

General Usage
, ,
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