Back to Questions
811
views4
comments
JQueryUI Tooltip usage
websharperjqueryuitooltip

I'm finding jqueryui nice to use for client-side code under websharper, but I can't seem to get Tooltip to work.

Here is some sample code which compiles and runs, other jquery widgets work fine (removed here for simplicity), but the Tooltip does not!

1
2
3
4
5
6
7
8
9
10

    open WebSharper
    open WebSharper.Html.Client
    open WebSharper.JQueryUI
    let t1config = TooltipConfiguration(Content = "this tooltip works")
    let tooltip1 = Tooltip.New( t1config)
    Div [
            HR []
            H4 [Text "The tricky bit..."]
            Div [ tooltip1 ] -< [Text "HaHaHa"]
        ]

I'd be grateful for the (probably very stupid) thing I'm doing wrong?

.

Thanks very much.

My confusion was that Tooltip() - unlike other widgets which make nodes - modifies an existing node. So it is going to be different anyway. Putting the tooltip text into a title adds a tooltip under HTML (and works with or without using JQuery). I guess the JQuery customisations can then be got as above.

Tom

By on 8/12/2015 12:39 AM ()

Hi, how could I add a content function to this? ( http://api.jqueryui.com/tooltip/#option-content )

By on 11/22/2015 11:17 AM ()

WebSharper's JQueryUI binding seems to handle tooltips in a weird way. Here's an ugly solution, checking if I can find something better later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

open WebSharper
open WebSharper.Html.Client
open WebSharper.JQuery
open WebSharper.JQueryUI

[<JavaScript>]
module Client =

    type JQuery with
        [<Inline "$0.tooltip()">]
        member x.Tooltip() = Unchecked.defaultof<JQuery>

    let Main =
        let t1config = TooltipConfiguration(Content = "")
        let tooltip1 = Tooltip.New( t1config)
        Div [
            HR []
            H4 [Text "The tricky bit..."]
            Div [ Title "this tooltip works" ] -< [Text "HaHaHa"]
        ]
        |> fun el -> 
            JQuery.Of(el.Dom).Tooltip().Ignore
            el.AppendTo "main"

Basically you want to put your tooltip into a title attribute which will be converted into a tooltip if you call the tooltip() method on any parent of the element.

By on 8/11/2015 10:08 AM ()

I am no expert on jQuery UI, but I would think you need to "initialize" these tooltips somehow?

By on 8/10/2015 10:19 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper