In a WebSharper app I’m using Bootstrap tooltips, and those need to be initialised explicitly. As shown in the doc this is
easily done. For example this code will make the tooltip work as expected for the element with id
elementId, so that hovering that element will trigger the tooltip
to be shown:
var el = document.getElementById(elementId) new bootstrap.Tooltip(el)
However, in my case, the element for which a tooltip should be shown is dynamically added and removed from the document following user actions. And the tooltip didn’t hide immediately, but only if the user scrolled the page, leading to confusion as the tooltip shown was about an element of the page that is not present anymore.
The solution in my case was to call
.dispose() on the tooltip object constructed on the last line of the previous code excerpt. Let’s see how this can be done with WebSharper.
First, we need to get a handle to the tooltip objects when it is initialised. This code does initialise the tooltip on element with id
tooltipId and assigns it to the variable
Now, F# is statically typed, and
tooltip is of the type
Two solutions are available.
Unsafe access with
This is the simplest solution, but that should be used only for the simplest case as type safety is lost.
? which lets you call dispose like this:
This works, but there’s no compile-time checks and you risk runtime errors. This makes this solution to be sparsely used.
Define a binding
What we do:
Define a type that we annotate with
Define a member for the method we want to access. We annotate this method with
[<Stub>]attribute is inherited, so no need to repeat it here.
The body of the method is
[<Name>]annotation. It will however raise a
ClientSideOnlyexception if you try to call this method at the server side.
When we initialise the tooltip, we can now explicitly set the type of our variable to the stub type we defined:
With that being done, we can call the method:
Dispose is known by the typechecker, and is even proposed in code completion, making it the preferred solution for more complex or intensive uses.
Thanks to @Jand42 for the feedback on this post.