Specify CSS icon

[itafraze]

closes #38

[disberd]

Hi @itafraze,

Thanks a lot for you interest in the package and for submitting this PR and sorry for the late in the reply.

The reason why there is no icon still is that I wanted first to add a tooltip with some information on how to use the BondTable but due to time I never effectively implemented this.

I would like to add an icon only after we have at least a very basic tooltip/description about this.

If you are willing to also add a very small description about the BondTable (I can help you with understanding features) I think we can merge with an icon as well :)

[itafraze]

Hi @disberd, sure, I can look into it. But I'm not sure what you mean by 'tooltip/description'.

[disberd]

Thanks for this.
I meant some box/div/description that comes up when hovering on the button.

For an example you can look at the popout element in the bond table which has the actual div with the bonds appear only when hovering over the icon:

PlutoExtras.jl/src/structbond/main_definitions.jl

Lines 334 to 381 in 1582b78

	<popout-container key='$(p.secret_key)'>
	<popout-header><span class='popout-icon popout'></span></popout-header>
	<popout-contents>$(Child(p.element))</popout-contents>
	</popout-container>
	<script id='$(p.secret_key)'>
	// Load the floating-ui and interact libraries
	window.floating_ui = await import('https://esm.sh/@floating-ui/dom')
	const { computePosition, autoPlacement } = floating_ui
	const container = currentScript.previousElementSibling
	const header = container.firstElementChild
	const contents = container.lastElementChild
	// Load the interactjs part
	$popup_interaction_handler
	function positionContents() {
	computePosition(header, contents, {
	strategy: "fixed",
	middleware: [autoPlacement()],
	}).then((pos) => {
	contents.style.left = pos.x + "px"
	contents.style.top = pos.y + "px"
	})
	}
	container.popout = (force = undefined) => {
	container.classList.toggle('popped', force)
	positionContents()
	}
	header.onclick = (e) => {container.popout()}
	contents.onmouseenter = (e) => container.classList.toggle('contents-hover', true)
	contents.onmouseleave = (e) => container.classList.toggle('contents-hover', false)
	header.onmouseenter = (e) => {
	container.classList.toggle('header-hover', true)
	container.classList.contains('popped') ? null : positionContents()
	}
	header.onmouseleave = (e) => container.classList.toggle('header-hover', false)
	</script>
	<style>
	$(CSS_Sheets.popout)
	</style>
	""")
	end

Though this is of course not the only way to implement something similar (nor probably the best way to do it but I am not a javascript developer :P)